views:

59

answers:

2

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

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;
});
Pat
+2  A: 

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

Nick Craver
@Nick: Never noticed the switch on toggle before - that's handy.
Pat
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
@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
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
@Adrian33 - Woops, I forgot a `> 0` on the `any` variable, give it a try now - demo updated as well.
Nick Craver
For your interest, the jsfiddle example hasn't changed, but the code above is working correctly. Thanks, and good work.
Adrian33
@Adrian33 - I meant the demo at the *very* bottom of the answer ;) and welcome! :)
Nick Craver
@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
Nick Craver