Show/hide Without Using Css

I have the following sample. I want to achieve by changing the CSS properties. How can I do it?

Menu

Copy

Solution 2:

Jquery's Hide & Show behave like CSS's display:none & display: [the default display value of the element]

Working Fiddle<-- with minimum changes (I would actually use this)

Solution 3:

try jquery

$( "#btn-toggle-menu" ).click(function() {
  $( "#menu-wrapper" ).toggle();
});

Solution 4:

Ok here.

<divid="btn-toggle-menu">Menu</div><divid="menu-wrapper"><ul><li>link item</li><li>link item</li><li>link item</li><li>link item</li><li>link item</li><li>link item</li></ul></div>

This is your code?

Using jQuery you can select which element takes which property on which event. jQuery actually do toggle the CSS properties. So what you want would be achieved once you are specifying correct eventelement and css-property.

Have a look:

Here the event will be a click and the element to shift its display will be ul.

You want to show/hide the ul. So this would do the job.

$('#btn-toggle-menu').click(function() { // on the click event
  $('#menu-wrapper').toggle(); // toggle would hide/show it. on its own :)
})

You can learn about this here: http://api.jquery.com/toggle/

Note: You must have the jQuery plugin for this. To make sure the jQuery events would occur. You can download the plugin in the footer of the site I provided. :) Good luck!

Your code:

Your code is also good, but its alot lengthy and more like hard-coded!

$('#menu-wrapper').hide();

$('#btn-toggle-menu').on('click', function(e) {
var menu = $('#menu-wrapper');
  if(menu.is(':hidden')) {
    menu.show();
  } else {
    menu.hide();
  }
});

This will first have a look on the menu, if its hidden then it will show! Otherwise hide it. That's good and correct! But a bit lengthy, jQuery API would help you solve this easily. Using their plugin. Download it from the link at the bottom, the latest plugin would let you use all the latest features of jQuery. :)

Edit I made in your code:

I just editted the jQuery code from your fiddle and this was the result:

fiddle. Here I was able to hide/show the div :) And it was just one line code!

Share