Closing drop-down menu by clicking on the button itself

Question

I've seen a lot of questions on this wesite about closing a drop-down menu by clicking anywhere on the page.

My question is a little bit different though. I don't want the dropdown-menu to close by clicking outside of it. The moment I click on the button that shows me the menu, I want the menu to stay like that (drop-downed) untill the user clicks on that same button again. Also, the moment when the menu is shown, I want it to push the other elements direcly beneath it down. These elements could be for example other buttons. You guys might have seen this concept on some websites and I like the idea. I want to create the same thing, but I don't how.

This will probably be made with Javascript since this is easier, but I don't know how to do it. Do you guys have any ideas or tips?

I would be very grateful. Thanks in advance.

Edit: Here's an example of what I ment: Link to jsfiddle -> https://jsfiddle.net/Cerebrl/uhykY/

I want to push down button 2 and 3 the moment the first menu is drop downed, so it can create it's own space to display. And secondly, the menu should only close the moment I push the button, not by clicking outside of it.

Answer 1

If you want the menu to push the content below, than put it in normal flow. What you need is a simple jQuery's slideToggle method and to hide the menu by default:

 $('[data-toggle]').on('click', function(e){ e.preventDefault; var thisLink = $(this); var toToggle = $( thisLink.data('toggle') ); toToggle.slideToggle(200); }) 

 * { font-family: sans-serif; } .toggle-menu a { display: block; float: right; padding: 5px 20px; text-align: center; background: none #F1B475; cursor: pointer; } #menu-main { background: none #FA982E; margin: 0; padding: 0; list-style: none; display: none; } #menu-main a { display: block; padding: 5px 20px; text-decoration: none; } #menu-main a:hover, #menu-main a:focus { background: none #D0812D; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="toggle-menu"> <p> HALLO <a data-toggle="#menu-main" title="Click to toggle">+</a> </p> </div> <ul id="menu-main"> <li><a href="#">Menu item 1</a></li> <li><a href="#">Menu item 2</a></li> </ul> <p> Other content </p> 

Since the menu has no absolute or fixed position, it will push the content below it. JSFiddle playground

Answer 2

Your can use toggleSlide method in two lines like

 $(function(){ $('button').click(function(){ $('ul').slideToggle(); }); }); 

 ul { background: none #FA982E; margin: 0; padding: 0; list-style: none; display: none; } ul a { display: block; padding: 5px 20px; text-decoration: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <button data-toggle="#menu-main" title="Click to toggle">Toggle Menu</button> </p> <ul id="menu-main"> <li><a href="#">Menu item 1</a></li> <li><a href="#">Menu item 2</a></li> </ul>