Hide div when the page is loaded and show when link is clicked

Question

I took this simple code for drop down menu and it's working so far. The problem is that when I load the page, #drop menu is displayed, which is obviously not what we want. The goal is to show the #drop menu when #submenu link is clicked, not immediately.

I modified my code below, because I need a div element, not a list.

js

$(document).ready( function(){

    $('#submenu').click( function(event){
        event.stopPropagation();
        $('#drop').toggle();
    });

    $(document).click( function(){
        $('#drop').hide();
    });

});

html

<a href="#" id = "submenu">Products</a>
   <div id = "drop" >
     DROP DOWN MENU
   </div>

Answer 1

添加一些CSS：

#drop { display: none; }

Answer 2

just put this code in your dropdown.

 <a href="#" id = "submenu">Products</a>

 <div id = "drop" style="display:none;">

  DROP DOWN MENU

 </div>

and your problem will be resolved when page load drop div will be hidden that u can use toggle or show command in jquery function.

Regards

Imran Qasim

Answer 3

Since you don't want your element to be displaced when the page first loads, why not set its visibilty to hidden in the html, like style="visbility:hidden" ,and assign submenu link an action listener function and reference this element via getElementById and set its visibility to visible. document.getElementbyId("dropDownMenu").style.visibility = "visible"

Answer 4

If you dont't want to use css then you can do it with jquery.

<a href="#" id = "submenu">Products</a>
  <div id = "drop" >
   DROP DOWN MENU
  </div>  


<scitpt type="text/javascipt">
    $(document).ready( function(){
      $('#drop').hide();

    $('#submenu').click( function(event){
    event.stopPropagation();
    $('#drop').toggle();

    });

    $(document).click( function(){
    $('#drop').hide();
    });

   })
 </script>                 

Fiddle