javascript - What is wrong with this code, trying a click menu? -

so there left side vertical menu. , has small options button. when clicked, should open div have various filter options. now, need appear when clicked, , disappear when either options button clicked again, or user clicks anywhere outside div.

so have following code.

//options filter menu animation $('#optionsmenu').hide(); //hides menu  $('.optionsfilters').click(function(e){     var $this = $('#optionsmenu');     $this.show();     var left = $('#sidebar').css('width'),         top = $(this).offset().top;     $this.css('top', top);     $this.css('left', left); }); $(':not(.optionsfilters)').click(function(e){     $('#optionsmenu').hide(); }); 

the html is

<div id="sidebartitle">     <h2>organisation</h2>     <a id="optionsfilters" class="optionsfilters">options</a> </div> <div id="optionsmenu" class="optionsfilters">     <h3>add new</h3>     <ul>         <label>year</label>         <select>             <option>2000</option>             <option>2001</option>             <option>2002</option>             <option>2003</option>             <option>2004</option>             <option>2005</option>         </select>     </ul> </div> 

its not working together, i.e. 2 javascript functions, first 1 works alone, when second 1 commented out. second 1 works, if comment out hide part, , add alert message. together, don't work.

whats conflict?

ok there few things want do:

1) if want original button close menu want use .toggle() rather .show()

2) want detect click on document, hide options menu. not called if options menu clicked due e.stoppropagation(); (point 4 below).

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

3) want check (as both have same class) .optionsfilters clicked not filters (otherwise stop clicking option).

    if( e.target !== ) {        return;     } 

4) use e.stoppropagation(); stop event bubbling parents (or document).

this should looking for:

$('#optionsmenu').hide(); //hides menu  $('.optionsfilters').click(function(e){     e.stoppropagation();     if( e.target !== ) {        return;     }     var $this = $('#optionsmenu');      $this.toggle();     var left = $('#sidebar').css('width'),        top = $(this).offset().top;     $this.css('top', top);     $this.css('left', left); });  $(document).click(function() {   $('#optionsmenu').hide(); }); 

here working fiddle: http://jsfiddle.net/lee_gladding/pny4vq26/