Question

I have a button which when toggled displays/hides a div (‘.reportOptions’), this works perfectly fine.

$('.reportOptions').click(function(e){ 
   e.stopPropagation();
});


$('.requestOptions').toggle(
   function(){
      $(this).parent().find('.reportOptions').css('display','block');   //show request options
   },function(){
      $('.reportOptions').css('display','none');    //hide all request oprtions menus
   }
);

the same div can also be hidden by clicking away from it by doing the following

$(document).click(function(){
   $('.reportOptions').css('display','none');
   $('.requestOptions').toggle(even);
});

the problem I have with the last function is that if it is performed I must double click the resuestOptions button in order to display the div again.

What I want to know is if there is any way in which you can reset the toggle state without having to change the toggle function.

Answer 1

Take a look at the documentation for jQuery’s toggle method: http://api.jquery.com/toggle/

You may also want to take a moment to read through it further as there are show() and hide() methods. You should not be using css(‘display’,’none’) to show and hide elements as the show and hide methods will handle all of that for you and it’s much less confusing when you read your code.

I think you may have overthought this situation a bit. Try this instead:

$('.reportOptions').click(function(e){ 
   e.stopPropagation();
});


$('.requestOptions').click(
   function(e){
      $(this).parent().find('.reportOptions').show();   //show request options
      $('.requestOptions').hide();    //hide all request oprtions menus
      e.stopPropagation();
   }
);


$(document).click(function(){
   $('.reportOptions').hide();
   $('.requestOptions').show();
});

Basically you’re binding a click function to the button that shows the div and hides the button and a click function to the document which hides the div and shows the button. The clicks on the button and the div stop propagation (which is what you were missing in the button before) so that the document click handler doesn’t fire when those elements were clicked.