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?

java script? or javascript? javascript isnt java! – sensorario Apr 01 '14 at 07:06 — sensorario, Apr 01 '14 at 07:06

score 1 · Answer 1 · answered Apr 01 '14 at 07:23

1

Demo

Add js :

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

answered Apr 01 '14 at 07:23

Richa

4,240
5
33
50

Hi. The question is not about jQuery, (the suggestion is nice but) can you show how to do it in `JavaScript`? Also `$('div a')` is a vague selector, perhaps suggesting something else? – Roko C. Buljan Apr 01 '14 at 07:56

score 1 · Accepted Answer · answered Apr 01 '14 at 07:24

1

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

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

answered Apr 01 '14 at 07:24

Jérôme

292
1
6

Hence the upvote...(?) I could not resist to comment on this one. The question is not about `jQuery`. What kind of method is `child`, what's that selector `$(div > a)`, and why wrapping again a jQuery selector again in an element object `$(child)` it's a useless overhead. Also you can pass a boolean argument to the jQuery's `.toggle()` method ... – Roko C. Buljan Apr 01 '14 at 07:48

score 0 · Answer 3 · edited Mar 02 '15 at 19:13

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>

Create dropdown-menu with javascript

3 Answers3