Hi there, 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-->