Using Jquery to expand all answers below question

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-->

Please sort your formatting out; do not include valuable details about your question within the code blocks. — djdd87, Jul 23 '10 at 10:22
Adrian, go to http://jsfiddle.net/ and setup your code and save it. Copy the url here and it makes it much easier for people to help you. — Russ Clarke, Jul 23 '10 at 10:30

Nick Craver · Accepted Answer · 2010-07-23T11:38:41.997

2

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

edited Jul 23 '10 at 11:38

answered Jul 23 '10 at 11:03

Nick Craver

623,446
136
1,297
1,155

@Nick: Never noticed the switch on toggle before - that's handy. – Pat Jul 23 '10 at 11:19
Thanks, not working well with multiple questions (expand should apply to one question only - same issue with @Pat), and not sure why, but text divs should be hidden on page load as per css: http://gigpop.com/testnick.html – Adrian33 Jul 23 '10 at 11:20
@Adrian33 - I updated the answer, didn't realize you had multiple per page. The `.text` display issue is because they have `style="display: block;"` in-line, which is overriding your `.text { display: none; }`, just remove that in-line style. – Nick Craver Jul 23 '10 at 11:28
Nick - the outstanding issue, (which I knew would be the most tricky) is that the open/close is toggling the answers, it should really open any unopened (none, all or some), then shut them all. It's currently toggling their states. – Adrian33 Jul 23 '10 at 11:33
@Adrian33 - Woops, I forgot a `> 0` on the `any` variable, give it a try now - demo updated as well. – Nick Craver Jul 23 '10 at 11:39
For your interest, the jsfiddle example hasn't changed, but the code above is working correctly. Thanks, and good work. – Adrian33 Jul 23 '10 at 11:51
@Adrian33 - I meant the demo at the *very* bottom of the answer ;) and welcome! :) – Nick Craver Jul 23 '10 at 11:51
@Adrian33 - You're not using the whole of the example code in your page, take a look back at the demo in the answer, you're missing this piece in that page's code: `q.find('.allopener').toggleClass("highlighti", q.find('.text:hidden').length > 0);` which you need to set the "all" button's state correctly when comments are expanded. – Nick Craver Jul 30 '10 at 10:36
@Adrian33 - Also check for validity, you have an extra closing `` that will cause some odd behavior as well: http://validator.w3.org/check?uri=http://hackerbra.in/index_uncompressed.php&charset=(detect+automatically)&doctype=Inline&group=0 – Nick Craver Jul 30 '10 at 10:39

score 0 · Answer 2 · answered Jul 23 '10 at 10:32

This should be what you're looking for on click of .allopener:

$('.allopener').click(function() {

    $(this).toggleClass("highlighti");
    var showingAll = $(this).hasClass("highlighti");

    // Loops through all answers and shows all or hides all as determined above
    $('.answeropener').each(function(){
        if(showingAll){
            $(this).next().show(); 
            $(this).addClass("highlightc");
        } else {
            $(this).next().hide(); 
            $(this).removeClass("highlightc");
        } 
    });         

    return false;
});

Using Jquery to expand all answers below question

2 Answers2