How to hide dropdown menu when clicked anywhere on the page

Question

I have this code that does that. The only thing issue is that I have to click twice to open the dropdown after I've hidden it. Can you take a look at my code and tell me how I can fix it so that I only have to click the toggle once to open the dropdown?

  < script > $(function() { var menuVisible = false; $('#toggle').click(function() { if (menuVisible) { $('#drop-down').css({ 'display': 'none' }); menuVisible = false; return; } $('#drop-down').fadeIn(400).css({ 'display': 'block' }); menuVisible = true; }); $('#drop-down').click(function() { $(this).fadeOut(400).css({ 'display': 'none' }); menuVisible = false; }); }); $(document).click(function(e) { var container = $("#toggle"); if (!container.is(e.target) && container.has(e.target).length === 0) { $("#drop-down").hide(); var menuVisible = false; } }); < /script> 

 <div id="toggle"></div> <div id="drop-down"> <ul> <li>heading 1</li> <li>heading 2</li> </ul> </div> </div> 

Answer 1

You are missing a var menuVisible = false; at the bottom case. If you hide it by clicking somehwere else on the document you will need to set your variable too

This will do the trick: https://jsfiddle.net/sc3zLzqL/1/

if ($('#drop-down').css("display") != "none") 

will not require the variable