rob.m rob.m - 7 days ago 6
jQuery Question

How to toggle next ul class?

I am trying to open/close nested sub menus, I have three or four levels of nested

ul
s which are all closed but the first one. When I start clicking on the elements, the next
ul
should open and toggle show/hide. The
js
below it's not fully accomplishing what I am looking for.

CSS

.closed {
display: none;
}

.opened {
display: block;
}


HTML

<ul>
<li><button type="button">TOGGLE</button>
<ul class="closed">
<li>Two
<ul class="closed">
<li>Three
<ul class="closed">
<li>Four</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>


Trying js:

$("button").on("click", function(){
$(this).parent().next("ul").toggle(function() {
$(this).removeClass("closed").addClass("opened");
}, function() {
$(this).removeClass("opened").addClass("closed");
});
});

Answer

You should use $(this).next("ul") instead of $(this).parent().next("ul"), because ul is the immediate next element of the button. And you can use toggleClass method for toggling class like following.

$("button").on("click", function(){
    $(this).next("ul").toggleClass("closed opened");
});
Comments