Question

I am trying to work out how to expand all answers below a question when an .allopener span is pressed. Users can currently expand each answer individually, but not all at once. Any tips would be much appreciated. There would be many items on a page.

The allopener span button will open up the remaining unhidden .text classes in this item to reveal the answers to the question as though someone has individually clicked expand on each. Note, when it is pressed for the first time, some, all or no answers may already be expanded. Additionally, when it is pressed again, all answers will be hidden. And if pressed another time, all answers will be expanded. If again, all hidden.

When, pressed, the background of each answer’s expand button will also change accordingly: ie turning on and off the class .highlightc on each individual expand button, as though toggling.

jquery:

$('.answeropener').click(function() {
$(this).next().toggle(); //unhide/hide the sibling text answer
$(this).toggleClass("highlightc"); //alternate the background of this button
return false;
});

$('.allopener').click(function() {
$(this).toggleClass("highlighti"); //toggles background of button
$(this). 
$(this). 
return false;
});

css:

.highlighti {background: #FFFFFF;}

.highlightc {border-right:1px solid #DCDCDC;}

.text {display:none;}

html:

<div class="item" id="question1">
<div class="tophead">How do you skin a cat?</div>
<div class="bottomhead">by Gerald, 1 hour ago <span class="allopener">open/close</span> <span>all answers below<span>
<div class="answers">

<div class="answer"><div class="answernumber">1</div><div class="answerhead">answer by Harold <span title="expand this comment" class="answeropener">expand</span><div style="display: block;" class="text">this is my answer</div></div></div>

<div class="answer"><div class="answernumber">2</div><div class="answerhead">answer by Jesse <span title="expand this comment" class="answeropener">expand</span><div style="display: block;" class="text">this is my answer too</div></div></div>

<div class="answer"><div class="answernumber">3</div><div class="answerhead">answer by Seth <span title="expand this comment" class="answeropener">expand</span><div style="display: block;" class="text">I don't know</div></div></div>

</div> <!--answers-->
</div> <!--bottomhead-->
</div> <!--item-->

Answer 1

You could do something like this:

$('.answeropener').click(function() {
  $(this).toggleClass("highlightc").next().toggle();
  $('.allopener').toggleClass("highlighti", $('.text:hidden').length > 0);
  return false;
});
$('.allopener').click(function() {
  var any = $('.text:hidden').length > 0;
  $('.text').toggle(any).prev().toggleClass('highlightc', any);
  $(this).toggleClass("highlighti", any);
  return false;
});

You can give it a try here, apologies for the horrible, horrible colors used.

What we’re doing is upon click of the all button we’re checking what the action should be (if there are any hidden, show them, if not hide them all). The in the click of each .answeropener we’re checking if it left ahy .text nodes hidden…so the styling of the .allopener is correct, e.g. then the last answer is expanded it’s highlighti class is removed, because on click it would be hiding them all…so it’s state now correctly reflects this.

We’re able to keep this pretty short by using the .toggleClass(class, switch) overload, which lets you pass a boolean to tell it whether the class should be toggled on or off.

---

Update for comments, here’s a version that’ll work per-question:

$('.answeropener').click(function() {
    var q = $(this).closest('.item');
    $(this).toggleClass("highlightc").next().toggle();
    q.find('.allopener').toggleClass("highlighti", q.find('.text:hidden').length > 0);
    return false;
});
$('.allopener').click(function() {
    var q = $(this).closest('.item'), any = q.find('.text:hidden').length > 0;
    q.find('.text').toggle(any).prev().toggleClass('highlightc', any);
    $(this).toggleClass("highlighti", any);
    return false;
});

You can give it a try here