15

I am trying to make a div hidden by default and show by clicking a button. To close the div, I can either click on the button or anywhere else on the screen. Below is my attempt but the closing part is not working. I appreciated if anyone can point me to the right implementation or maybe a better way to do this.

$('#theDiv').hide();

$("#showDivBtn").click(function(){
  $("#theDiv").show();
});

if ( !$('#theDiv:hidden') ) {

$(document).click(function() {
    $('#theDiv').hide();
});
$('#theDiv').click(function(e) {
    e.stopPropagation(); 
    return false;        
});

}

});
Poyi
  • 910
  • 2
  • 10
  • 22

5 Answers5

22

placing the entire event handler inside a condition only checks the condition on first pageload, and the event handler is probably never attached, try it like this instead :

$('#theDiv').hide();

$(document).on('click', function(e) {
    if ( $(e.target).closest('#showDivBtn').length ) {
        $("#theDiv").show();
    }else if ( ! $(e.target).closest('#theDiv').length ) {
        $('#theDiv').hide();
    }
});

FIDDLE

adeneo
  • 312,895
  • 29
  • 395
  • 388
  • Thanks for the answer, I plugged that in a jsfiddle it appears to have an error, not clear to me why tough. http://jsfiddle.net/smLPp/ – Poyi Jun 12 '13 at 05:56
  • perfect that's what I wanted. thanks! – Poyi Jun 12 '13 at 06:09
  • @Poyi this won't work in an actual page with content. You can't click anywhere on the screen to hide the DIV. You can only click where there aren't any other elements. This is why you can't listen for a click handler on the `document` element... if there is another element where you click, that element gets the click event, not the `document`. –  Jun 12 '13 at 06:42
  • @Ghodmode - Sure it will work, events bubble all the way up to the document level, so clicking any element in the document will fire the event handler. This is how delegated event handlers are possible ? – adeneo Jun 12 '13 at 10:30
  • @adeneo try it. Your own fiddle doesn't hide the div if you click on either the "Toggle link" div or the div to hide. Why not? –  Jun 12 '13 at 19:46
  • @Ghodmode - the point of "clicking anywhere else on the screen", is usually to hide the element if anything **but** the element is clicked, not if the element itself is clicked? The toggle button doesn't toggle the div because it seemed it wasn't supposed to in the OP's code, but if that is in fact what it's supposed to do, one would simply replace `show()` with `toggle()`. – adeneo Jun 12 '13 at 20:03
  • Awesome code.. working fine. – Vinit Kadkol Jul 13 '15 at 19:53
1

Try this,

$('#theDiv').hide();

    $("#showDivBtn").click(function(){
      $("#theDiv").toggle();
    });

    $(document).on("click" , function(event){

    if( $(event.target).attr("id") != "theDiv" && $(event.target).attr("id") != "showDivBtn" && $(event.target).parents("#theDiv").attr("id") != "theDiv")
    {
    $('#theDiv').hide();
    }
    });
Shinov T
  • 862
  • 5
  • 9
0

try using

if( !$('.theDiv' ).is( ':visible' ) )

instead of

if ( !$('.theDiv:hidden') )

Prakash GPz
  • 1,675
  • 4
  • 16
  • 27
0

try this

    <script type="text/javascript">
    $('.opendiv').hide();
    $(document).click(function (event) {
        var $target = $(event.target);
        if ($target.attr('id') == 'addAccordion') {
            if ($('.opendiv').is(':hidden')) {
                $('.opendiv').show();
            }
            else {
                $('.opendiv').hide();
            }
        }
        else if ($target.closest('.opendiv').length > 0) {

        }
        else {
            $('.opendiv').hide();

        }

    })
</script>
 <div>
    <input id="addAccordion" type="button" value="ADD COMMENT" />
</div>
<div id="rs" class="opendiv">
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">
            www.asp.net</a>.
    </p>
    <p>
        You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"
            title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
    </p>
</div>
sangram parmar
  • 8,462
  • 2
  • 23
  • 47
0

I don't think you can target document with a .click handler like that.

Rather than making it so you can literally click anywhere to close the DIV, just make it seem that way. Put a clear DIV behind the one that you want to be able to close and make it cover the whole screen. Then you can attach your click handler to that.

HTML:

<button>Click me to show the DIV</button>
<div class="container">
    <div class="thediv">
        <p>I'm the DIV</p>
    </div>
</div>

JavaScript:

$(document).ready(function () {
    var $button = $("button");
    var $container = $("div.container");
    $button.click(function () {
        $container.show();
    });
    $container.click(function () {
        $container.hide();
    });
});

CSS:

div.container {
    display: none;
    position: fixed;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
}
div.thediv {
    position: absolute;
    top: 30%;
    left: 10%;
    background-color: gray;
    color: white;
    padding-top: 1em;
    border-radius: 5px;
    width: 50%;
}
p {
    background-color: black;
    text-align: center;
    padding: 2em;
}

For demonstration purposes, I made the background DIV visible in this Fiddle