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

Demo

Add js :

$('div a').click(function(){
    $('.submenu').slideUp();
    $(this).next().slideDown();
});

Answer 2

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

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

Answer 3

Working Solution: http://jsfiddle.net/avi_sagi/CfqGG/211/

Jquery:

$(document).ready(function () {
   $(".collapse").parent().find(".subitem").hide();
   $(".collapse").on('click', function () {
       $(this).parent().find(".subitem").slideToggle();
   });
});

HTML: - add containers(.list-group) to each submenu groups for parent() method to target the only list items in its group.

<div class="wrapper"> 
    <div class="list-group">
        <a class="collapse" href="javascript:void(0)">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>
    <div class="list-group">
        <a class="collapse" href="javascript:void(0)">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>
    <div class="list-group">
        <a class="collapse" href="javascript:void(0)">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>
</div>