jQuery click to hide fix

Question

I need a jquery help in click to to hide issue .

What I have now :

I have a text I can click and it will open div . And when I click any place this div hides .also when I click the Gray div still it's hide

*What I am trying *

I am trying to limit the hiding . IF I click on the Div it should not hide . beside that clicking other places It will hide .

Live js Fiddle demo: http://jsfiddle.net/S4hcf/

HTML

<p class="show_hide">Clcik Me</p>

<div class="slidingDiv"></div>

CSS

div{
width:200px;
height:150px;
background:#ccc;

}

p{
 cursor:pointer;

 }

jQuery

 // click to hide    
$('html').click(function(event){
    if($('.slidingDiv').is(':visible')){
       $('.slidingDiv').hide(); 
    } 
});

//Toggle

$(".slidingDiv").hide();    

$('.show_hide').click(function(event){
    event.stopPropagation();
$(".slidingDiv").slideToggle();
});

Any help will be appreciated . Thanks

Answer 1

You can simply prevent the click bubbling up to the outer click when clicking on the div itself:

$(".slidingDiv").click(function(e){
    e.stopPropagation();
});

http://jsfiddle.net/S4hcf/4/

Answer 2

you can try

$(".slidingDiv").click(function(e){
    e.stopPropagation();

});

http://jsfiddle.net/S4hcf/1/

Answer 3

Add $(event.target).hasClass('.slidingDiv') to your condition

$('html').click(function(event){
    if($(event.target).hasClass('.slidingDiv') && $('.slidingDiv').is(':visible')){
        $('.slidingDiv').hide(); 
    } 
});

DEMO: http://jsfiddle.net/S4hcf/5/

Answer 4

You can initially set the showing div to display:none

      .slidingDiv{
            display:none;
                 }

and write the below script for it to toggle

  $('.show_hide').click(function(event){
    event.stopPropagation();    
    $(".slidingDiv").slideToggle();
   });

refer this fiddle http://jsfiddle.net/Kritika/qhXcf/