FAQ Collapse

by TheFiddler

HTML

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

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

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

</div>     
</div>
<button id="expand">Expand all</button>
<button id="collapse">Collapse all</button>

CSS

.faq {
padding:0 0 1.5em 0.5em;
margin-bottom:1.8em;
margin-top:5px;
}
.faq_item {
overflow:hidden;
margin-bottom:0px !important;
}
.faq_header {
font-weight:normal;
font-size:12px;
margin-top:5px !important;
margin-bottom:0px !important;
padding-left:25px;
padding-top:5px;
padding-right:5px;
text-decoration:underline;
cursor: pointer;
}
.faq_header:hover {
text-decoration:underline;
}

.faq .active {
background:url(/assets/images/faq_bullet_act.gif) no-repeat left top;
font-weight:bold;  
padding-top:5px;
padding-right:5px;
padding-bottom:0;
height:auto;
background-color:#f5f5f5;
border-color:#ccc;
border-style:solid;
border-width:1px 1px 0 1px;
-moz-border-radius-topleft: 9px;
-moz-border-radius-topright: 9px;
-moz-border-radius-bottomleft: 0px; 
-moz-border-radius-bottomright: 0px;
-webkit-border-top-left-radius: 9px;
-webkit-border-top-right-radius: 9px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
-khtml-border-radius: 9px 9px 0px 0px;
}

.faq_content {
padding:5px 5px 10px 25px;
overflow:hidden;
height:auto;
background-color:#f5f5f5;
border-color:#ccc;
border-style:solid;
border-width:0 1px 1px 1px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
-khtml-border-radius: 0px 0px 9px 9px;
}

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;
    });

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