CODEWITHSUNDEEP
jquerytoggle
user2217381
user2217381

Reputation: 21

Hide show/toggle div by clicking anywhere else.

I was able to create a simple show/hide jQuery function as seen in the code below...

I am trying to make it when the div is displayed the user doesnt have to click the button to make it hide again. So when either they click somewhere else on the page or when they scroll down it disapears....

I tried repeating this same function but replacing #hideshow with body but that messed everything up.

Can i have some help please? 

<a type='button' id='hideshow' value='hide/show' ><li class="glob">About</li></a>

jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {        
     jQuery('#about_box').slideToggle('show');
});
});

Upvotes: 0

Views: 1424

Answers (3)

Denny Smith
Denny Smith

Reputation: 113

Try http://jsfiddle.net/X5xBs/

$(document).ready(function(){
$('#hideshow').on('click', function(event) {        
    $('#about_box').slideToggle('show');
});
    $('#hideshow').mouseleave(function () {
    $('#about_box').slideToggle('hide');
});
});

Upvotes: 0

user788472
user788472

Reputation:

First of all, .live() is out-of-date and was removed in jQuery 1.9. You should be using .on() instead. Second, if you're putting a click handler on something like body or document you need to put a click handler on the element that you don't want to trigger it and have it call event.stopPropagation().

Upvotes: 1

Aiias
Aiias

Reputation: 4748

Try using the .blur() event.

jQuery('#hideshow').blur(function() {
  jQuery('#about_box').slideUp();
});

Upvotes: 0

Related Questions