CODEWITHSUNDEEP
htmljqueryjquery-selectors
moonsyn
moonsyn

Reputation: 3

hide previous div when next div's display is none or hidden in jQuery

Is it possible to hide a previous div when my next div's display is none or if its hidden.

<div id="first"> Hello </div>
<div id="second">
  <div id="secondchild1" style="display:none"> How are you.? </div>
  <div id="secondchild2" style="display:none"> Nice to meet you </div>
</div>

Now i need to hide first when all the child divs in second are hidden or thier display is none.

And even when one of the child divs are displayed, the first should also be displayed.

Thanks in advance.

Upvotes: 0

Views: 1036

Answers (3)

micadelli
micadelli

Reputation: 2482

Iterate over all divs inside the #second div to check whether the current child div is visible or not. If it's visible exit the function and set boolean to true. Lastly, show or hide the #first div based on the boolean value.

var showFirst = false;
$('#second div').each(function() {
    if ($(this).is(':visible')) {
        showFirst = true;
        return false;
    }
});
showFirst ? $('#first').show() : $('#first').hide();​

JSFiddle
http://jsfiddle.net/Az3aW/

Upvotes: 2

Alex Ball
Alex Ball

Reputation: 4474

$('#second').children().each(function(){
    if($(this).css('display') == 'none') $('#first').hide();
});

When you get one display none hide

Upvotes: 0

Nikola K.
Nikola K.

Reputation: 7155

if($("#second").children().css("display") != "none")
{
    $("#first").css("display", "none");
}

Upvotes: 0

Related Questions