javascript - How to toggle next ul class?

Question

I am trying to open/close nested sub menus, I have three or four levels of nested uls 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 1

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");
});