Alright, let's see what we have here.
<div id="btn-toggle-menu">Menu</div>
<div id="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>
Is this the code you're working with?
By using jQuery, you can easily control which elements get certain properties when specific events occur. jQuery simplifies handling CSS properties toggling. All you need to do is correctly specify the event, element, and css-property.
Take a look at this example:
In this case, the event will be a click, and the element that will toggle its display property will be the ul.
If you want to show/hide the ul, this jQuery snippet will do the trick:
$('#btn-toggle-menu').click(function() {
$('#menu-wrapper').toggle();
})
You can find more information on jQuery toggle method here.
Remember: You must have the jQuery plugin installed for this functionality to work properly. You can download the plugin from the provided link in the website footer. Good luck!
Your current code:
While your code works fine, it seems a bit lengthy and hard-coded. It's always beneficial to leverage jQuery to simplify your code.
$('#menu-wrapper').hide();
$('#btn-toggle-menu').on('click', function(e) {
var menu = $('#menu-wrapper');
if(menu.is(':hidden')) {
menu.show();
} else {
menu.hide();
}
});
This modified version of your code achieves the same result but in a more concise way. For easy implementation, consider utilizing the latest features of jQuery by downloading the plugin from the given source.
Edit I made in your code:
I made a slight adjustment to your jQuery code in the fiddle provided: fiddle. With just one line of code, I was able to successfully hide/show the div element! Impressive, right? Keep exploring jQuery to enhance your coding experience.