CODEWITHSUNDEEP
jquery
ptamzz
ptamzz

Reputation: 9365

How to detect when all divs inside of another div are invisible

I've my HTML as

<div id="main">
    <div class="item">String</div>
    <div class="item">String</div>
    <div class="item">String</div>
</div>

Clicking on each .item div sets the div clicked to display: none. When there are no divs displayed, I want the #main div to be set to display :none too.

So how do I detect that all the div .items inside the #main div are in 'display: none` mode using jQuery?

$(document).ready(function() {
    $('.item').click(function(){
        $(this).hide();
    });
});

Upvotes: 6

Views: 333

Answers (2)

Prasenjit Kumar Nag
Prasenjit Kumar Nag

Reputation: 13461

You can also do the following

if(!$('.item').is(':visible'))
    $('#main').hide();

Here is a working example: http://jsfiddle.net/mwGeT/

Upvotes: 0

Eevee
Eevee

Reputation: 48546

Use the :visible selector:

if (! $('#main > div:visible').length) {
    $('#main').hide();
}

Upvotes: 8

Related Questions