Question

Hi guys!

Hope somebody could help me to solve one small issue.

I have an expand/collapse FAQ list which was implemented with jQuery. Everything works fine so far except the client wants to have two buttons: “Expand All” and “Collapse All”. I tried in different ways but nothing worked.

Would anybody help to add some script to create these buttons?

HTML:

<div class="faq">
<div class="faq_item" > 
<div class="faq_header">Question</div>
<div class="faq_content" ><p>Answer</p></div>
<div class="closed"><p>Answer</p></div>
</div>
<div class="faq_item">
<div  class="faq_header">Question</div >
<div class="faq_content" ><p>Answer</p></div>
<div class="closed"><p>Answer</p></div>
</div>
<div class="faq_item">
<div  class="faq_header">Question</div >
<div class="faq_content" ><p>Answer</p></div>
<div class="closed"><p>Answer</p></div>
</div>     
</div>

JavaScript:

jQuery(document).ready(function() {
    $('.faq_content').hide();
    $('.faq_header').click(function() {
        t = $(this);
        if (!t.hasClass('active')) {
            t.parent().children('.faq_content').slideToggle();
            t.addClass('active');
        }
        else {
            t.parent().children('.faq_content').slideToggle();
            t.removeClass('active');
        }
        return false;
    });
});

Here is the jsFiddle: http://jsfiddle.net/G7tTN/

Thanks in advance!

Answer 1

Try this code:

$("#expand").click(function() {
    $(".faq_header").addClass("active").siblings(".faq_content").slideDown();
});
$("#collapse").click(function() {
    $(".faq_header").removeClass("active").siblings(".faq_content").slideUp();
});

DEMO: http://jsfiddle.net/G7tTN/1/