CODEWITHSUNDEEP
jqueryresponsive-designtoggle
LeeTee
LeeTee

Reputation: 6601

jquery toggle to show hide elements on responsive design

I use CSS to show and hide elements at certain break points. I also use jquery toggle to show / hide elements. If I resize my browser to mobile size, everything works, but then when I resize the browser to make bigger, the elements I have hidden using Jquery are then hidden leaving gaps in my web page. I need a seemless way to reset to the original on window resize or change of orientation.

For example, I have a menu div that I hide with CSS for a tablet or mobile and I display a menu icon using CSS instead of the menu. I then use Jquery to show / hide the menu when the icon is selected. If I make the browser larger or change orientation of a mobile or tablet to landscape, the menu does not show if the user hid the menu using the icon. How can I fix this?

Upvotes: 0

Views: 2437

Answers (1)

PlantTheIdea
PlantTheIdea

Reputation: 16369

I have the same issue on mine. This is a very simplistic version of my solution:

$(window).on('resize',function(){
    if($(this).width() > 800){
        $('#Menu').removeAttr('style');
    }
});

Or whatever the width is where the menu should show. This gets rid of the "show/hide" inline CSS that jQuery put in there by hitting the button.

I will say that my solution involves more components ... being in a function, and I noticed that the .on() handler applied a million times for the mobile version, so I have .off() before the .on('click') ... stuff like that. But the core component is to remove the style attribute that jQuery gives the menu, so that the CSS you gave it is no longer overridden.

Upvotes: 1

Related Questions