Creating multiple dropdown like in stackoverflow

Question

I want to make a dropdown menu like the one in this site. I want to make 3 things happen.

Make dropdown appear on click.
Only display one dropdown at a time, so clicking on another dropdown link will remove the displaying dropdown and add the dropdown you clicked on.
Removing displayed dropdown when clicking on the same dropdown link or clicking outside the dropdown.

I am not sure if I need a plugin or if the best way is to create this by writing your own code.
Here is my code and it works good but the only problem is that it dosen't remove the displayed dropdown when clicking on the same dropdown link.

	$('a#menu1').click(function() {
  	$("div#1").show();
  });
  $('a#menu2').click(function() {
  	$("div#2").show();
  });
   $('a#menu3').click(function() {
  	$("div#3").show();
  });

$(document).mouseup(function (e)
{
    var container = new Array();
    container.push($('.display_menu1'));
    container.push($('.display_menu2'));
    container.push($('.display_menu3'));
    
    $.each(container, function(key, value) {
        if (!$(value).is(e.target) // if the target of the click isn't the container...
            && $(value).has(e.target).length === 0) // ... nor a descendant of the container
        {
            $(value).hide();
        }
    });
});

div.body {
  background-color: white;
  width: 100%;
  height: 400px;
  border: 1px solid grey;
}

div.display_menu1 {
  display: none;
}

div.display_menu2 {
  display: none;
}

div.display_menu3 {
  display: none;
}

ul {
  margin: 0 0 30px 0;
  padding: 0px;
}

li {
  display: inline-block;
}

a.display {
  display: inline-block;
  background-color: lightblue;
  padding: 10px 20px;
  text-decoration: none;
}

div.display {
  background-color: grey;
  width: 200px;
  height: 100px;
}

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="body">
  <ul>
    <li>
      <a href="#" method="POST" id='menu1' class="number">Menu 1</a>
    </li>
    <li>
      <a href="#" method="POST" id='menu2' class="number">Menu 2</a>
    </li>
    <li>
      <a href="#" method="POST" id='menu3' class="number">Menu 3</a>
    </li>
  </ul>
  <div id="1" class="display display_menu1">
    This is dropdown-menu 1!
  </div>
  <div id="2" class="display display_menu2">
    This is dropdown-menu 2!
  </div>
  <div id="3" class="display display_menu3">
    This is dropdown-menu 3!
  </div>

</div>
</body>

Inside on click function check the style.display property of div. If it is "none" then call show() otherwise call hide() — Lalit
– Lalit, Commented Jun 3, 2017 at 18:12
You can use $("div#1").toggle() instead of $("div#1").show(); — Lalit
– Lalit, Commented Jun 3, 2017 at 18:14
Thanks for the answer, but i still don't manage to make it work. This is what happened when adding toggle. jsfiddle.net/4wc54rq5 — Night83
– Night83, Commented Jun 3, 2017 at 18:24

Mohamed-Yousef · Accepted Answer · 2017-06-04 17:22:39Z

1

The good thing is to work with classes not with Ids .. so in my next example I'm using data attribute and use same class for all divs

$('a[data-menu]').click(function() {
  var menu_num = $(this).data('menu');  // get the href data-menu attribute to get the div id from it
  $('.display_menu').not($('#'+menu_num)).hide(0); // hide all the divs but not the open one
  $('#'+menu_num).slideToggle(100);  // toggle the div its already shown .. this slideToggle will show/hide it by clicking the <a>
  $('li').not($(this).closest('li')).removeClass('active');
  $(this).closest('li').toggleClass('active');
});

$(document).on('click',function (e)
{
// no need here for using array and .each() 
    if (!$('a[data-menu] , .display_menu').is(e.target) // if the target of the click isn't the container...
        && $('a[data-menu] , .display_menu').has(e.target).length === 0) // ... nor a descendant of the container
    {
        $('.display_menu').hide(0);
        $('li').removeClass('active');
    }
});

div.body {
  background-color: white;
  width: 100%;
  height: 400px;
  border: 1px solid grey;
}

div.display_menu {
  display: none;
}


ul {
  margin: 0 0 30px 0;
  padding: 0px;
}

li {
  display: inline-block;
}

a.display {
  display: inline-block;
  background-color: lightblue;
  padding: 10px 20px;
  text-decoration: none;
}

div.display {
  background-color: grey;
  width: 200px;
  height: 100px;
}

.active{
  background : red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="body">
  <ul>
    <li>
      <a href="#" method="POST" id='menu1' class="number" data-menu="1">Menu 1</a>
    </li>
    <li>
      <a href="#" method="POST" id='menu2' class="number" data-menu="2">Menu 2</a>
    </li>
    <li>
      <a href="#" method="POST" id='menu3' class="number" data-menu="3">Menu 3</a>
    </li>
  </ul>
  <div id="1" class="display display_menu">
    This is dropdown-menu 1!
  </div>
  <div id="2" class="display display_menu">
    This is dropdown-menu 2!
  </div>
  <div id="3" class="display display_menu">
    This is dropdown-menu 3!
  </div>

</div>
</body>

edited Jun 4, 2017 at 17:22

answered Jun 3, 2017 at 18:20

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Night83 Over a year ago

Thanks! Works great!

Night83 Over a year ago

I am now trying to add a background color on the dropdown list item when the dropdown is displaying but I don't manage to make it work. Do you maybe know how to do this too?

Mohamed-Yousef Over a year ago

@Night83 answer updated .. You'll find the active class in css

Night83 Over a year ago

Thanks again! I really appreciate your help! :D

Collectives™ on Stack Overflow

Creating multiple dropdown like in stackoverflow

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related