Using Jquery to expand all answers below question -

i trying work out how expand answers below question when .allopener span pressed. users can expand each answer individually, not @ once. tips appreciated. there many items on page.

the allopener span button open remaining unhidden .text classes in item reveal answers question though has individually clicked expand on each. note, when pressed first time, some, or no answers may expanded. additionally, when pressed again, answers hidden. , if pressed time, answers expanded. if again, hidden.

when, pressed, background of each answer's expand button change accordingly: ie turning on , off class .highlightc on each individual expand button, though toggling.

jquery:

$('.answeropener').click(function() { $(this).next().toggle(); //unhide/hide sibling text answer $(this).toggleclass("highlightc"); //alternate background of 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 skin 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 harold <span title="expand comment" class="answeropener">expand</span><div style="display: block;" class="text">this answer</div></div></div>  <div class="answer"><div class="answernumber">2</div><div class="answerhead">answer jesse <span title="expand comment" class="answeropener">expand</span><div style="display: block;" class="text">this answer too</div></div></div>  <div class="answer"><div class="answernumber">3</div><div class="answerhead">answer seth <span title="expand comment" class="answeropener">expand</span><div style="display: block;" class="text">i don't know</div></div></div>  </div> <!--answers--> </div> <!--bottomhead--> </div> <!--item--> 

you this:

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

you can give try here, apologies horrible, horrible colors used.

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

we're able keep pretty short using .toggleclass(class, switch) overload, lets pass boolean tell whether class should toggled on or off.

---

update comments, here's 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'), = q.find('.text:hidden').length > 0;     q.find('.text').toggle(any).prev().toggleclass('highlightc', any);     $(this).toggleclass("highlighti", any);     return false; }); 

you can give try here