Question

I have this HTML:

<div id="parent1" class="article">
   <div class="action"></div>
   <div id="exp1" class="expand"></div>
</div>
<div id="parent2" class="article">
   <div class="action"></div>
   <div id="exp2" class="expand"></div>
</div>

and CSS:

.article:hover .action {
   z-index:1000;
}
.expand {
   display: none;
} 
action {
   background: url(../images/down.png) 0 0 no-repeat;
   z-index: -999;
}
.collapse {
   background: url(../images/up.png) 0 0 no-repeat !important;
   z-index: 1000;
}

and Javascript:

$(".article").click(function() {
   $(this).find(".action").toggleClass("collapse"); // works onclick div article
   ????????? // when press parent1 if parent2 pressed before ???????.find(".action").toggleClass("collapse");
   $("#exp2").hide(); // if previously open
   $("#exp1").toggle(300);
}

Now I need jQuery for onclick parent1 to toggleClass action in parent2 but only if prevously toggled to collapse.

Answer 1

There are a number of ways to do it. Normally I would store a local variable that holds the state of the drop down (boolean) and just check that.

With jQuery, since you are already using hide(), you can use:

if ($("#exp2").is(":hidden")) {
    // Show content, set arrow to up.
    $("#exp2").removeClass("expand").addClass("collapse");
}
else {
    // Hide content, set arrow to down.
    $("#exp2").removeClass("collapse").addClass("expand");
}

The toggle would make more sense if you were just adding and removing a class. Here you are alternating classes. Using addClass() and removeClass() makes it very clear what you are doing.