Create dropdown-menu with javascript

Question

This has been ask many times here, but I couldn't find a understandable solution for my code.

I want to create a mobile show/hide dropdown menu.

My code goes like:

<div>
   <a href="">Click this Link to collapse the subitems</a>
      <ul class="submenu">
         <li class="subitem">1</li>
         <li class="subitem">2</li>
         <li class="subitem">3</li>
         <li class="subitem">4</li>
      </ul>
   <a href="">Click this Link to collapse the subitems</a>
      <ul class="submenu">
         <li class="subitem">1</li>
         <li class="subitem">2</li>
         <li class="subitem">3</li>
         <li class="subitem">4</li>
      </ul>
   <a href="">Click this Link to collapse the subitems</a>
      <ul class="submenu">
         <li class="subitem">1</li>
         <li class="subitem">2</li>
         <li class="subitem">3</li>
         <li class="subitem">4</li>
      </ul>
</div>

The subitems shall be hidden. When I click the a-Tag ("Click this link...") the subitems below shall show. Please give me a solution without alternating the code itself -Is that even possible?? Only the subitems of the clicked -Link shall collapse.

Any help?

Answer 1

$(div > a).on('click', function() {
  var child = $(this).child('ul.submenu');

  if ($(child).is(':hidden')) {
    $(child).show();
  }
  else {
    $(child).hide();
  }
});