How can i show and hide div

Question

When user click on MoreDiv HiddenDiv will be show and when click again or clicked on any where of page hiddenDiv div must be hidden More

this is my css

.hiddenDiv {
  margin-left:505px;
  margin-top:25px;
  display:none;
  z-index:9876567890;
  position:absolute;
  width:100px;
  border:1px solid #CCC;
}
.hiddenDiv ul { 
  list-style:none;
  list-style-type:none;
  padding:0;
  margin:0;
}
.hiddenDiv ul li {
  padding:2px;
  cursor:pointer;
} .hiddenDiv ul li:hover {
  background-color:#4681C5;
}

This is my div

<div class="hiddenDiv">
  <ul>
    <li>Add favorites</li>
    <li>Give a Gift</li>
    <li>Block</li>
  </ul>
</div>

This is my jquery code

$(document).ready(function() { 
  $('div.moreDiv').click(function() {
    $(".hiddenDiv").css('display', 'block');
  });
});

Answer 1

Use toggle method to show and hide div.

$(document).ready(function() {
    $('div.moreDiv').click(function() {
        $(".hiddenDiv").toggle() });
});​

http://jsfiddle.net/R7VRq/24/

Answer 2

Use the show method

The below script will show when you click on the more link and hide it if you click anywhere in the window.

$(document).ready(function() {
   $(document).click(function() {        
    ShowHide();
   });

   $('div.moreDiv').click(function(e) {
      e.stopPropagation();
      ShowHide(true);
   });
});

function ShowHide(isFirstTime)
{
     var disp= $(".hiddenDiv").css("display");
     if((disp=="none")&&(isFirstTime))
     {                            
         $(".hiddenDiv").show()             
     }
     else
     {
          $(".hiddenDiv").hide()
     }        
}

Working sample : http://jsfiddle.net/R7VRq/31/