jQuery FAQ演示 - 展開和摺疊

Question

嗨，大家好！

希望有人能幫我解決一個小問題。

我有一個用jQuery實現的展開/摺疊FAQ列表。一切正常，除了客戶想要兩個按鈕：「全部展開」和「全部摺疊」。我嘗試了不同的方式，但沒有奏效。

有人會幫助添加一些腳本來創建這些按鈕？

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

這裏是的jsfiddle：提前http://jsfiddle.net/G7tTN/

謝謝！

Answer 1

試試這個代碼：

$("#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/