Toggling menu with jQuery
-
18-09-2019 - |
Question
I've got some HTML like the following:
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#" class="toggle">[Open|Close]</a><a href="#">Page 2</a>
<ul>
<li><a href="#">Page 2-1</a></li>
<li><a href="#">Page 2-2</a></li>
<li><a href="#">Page 2-3</a></li>
<li><a href="#">Page 2-4</a></li>
</ul>
</li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Page 5</a></li>
</ul>
And would like that when the a with the class 'toggle' is clicked the ul will be toggled. I am fairly decent with basic jQuery stuff, but have no real idea where to start with this one! Any alternative approaches that achieve the same result would be welcome too.
Solution
With that markup, this would work:
$('.toggle').click(function(){
$(this).siblings('ul').toggle();
});
OTHER TIPS
Check out the jQuery toggle function, http://docs.jquery.com/Effects/toggle
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow