Question

85

Hide div on blur

rated 0 times [ 92] [ 7] / answers: 1 / hits: 17255 / 14 Years ago, fri, january 7, 2011, 12:00:00

I have a jQuery function where when an element is clicked a hidden div shows.

$('.openHide').click(function(){

    $(this).next('.hiddenContent').toggle();

});

I need to modify it s that I could close this div if I click back not just on the first element. Possibly on Blur, but I am not sure how to indicate the element...

$('.hiddenContent').blur(function() {

    $('.hiddenContent').parent().children('.hiddenContent').hide();

});

Here's my HTML:

<span class=openHide>text here</span>

<div style=display:none class=hiddenContent>

     hidden content here

</div>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

irvinjovannix

Add To Favorites

Follow

Total Points: 416

Total Questions: 94

Total Answers: 117

Location: South Korea

Member since Sun, Aug 8, 2021

3 Years ago

answered 14 Years ago jameson · Accepted Answer

On the click on the span the div should be toggled

On the body click the div should be hidden

On the click on the div, the event should not be propagated to the body

On the click on the span the event should not be propagated to the body

$(document).ready(function() {    

   $('.openHide').click(function(e) {

        $('.hiddenContent').toggle();

        e.stopPropagation();

   });



   $(document.body).click(function() {

        $('.hiddenContent').hide();

   });



   $('.hiddenContent').click(function(e) {

        e.stopPropagation();

   });

});