【JQuery】不超過一頁的FAQ–收合功能

使用JQuery前，需要引用Jquery元件。

HTML 頁面(參考)︰
<div class="main">
<h1>A One Page FAQ</h1>
<h2>I've heard that JavaScript is the long-lost fountain of youth. Is this true?</h2>
<div class="answer">
<p>Why, yes it is! Studies prove that learning JavaScript freshens the mind and extends life span by several hundred years. (Note: some scientists disagree with these claims.)</p>
</div>
<h2>Can JavaScript really solve all of my problems?</h2>
<div class="answer">
<p>Why, yes it can! It's the most versatile programming language ever created and is trained to provide financial management advice, life-saving CPR, and even to take care of household pets.</p>
</div>
.... 省略之 .....
</div>

Javascript︰
<SCRIPT type="text/javascript">
$(document).ready(function() {
$('.answer').hide(); //隱藏
$('.main h2').toggle(
    function()
   {
      $(this).next('.answer').fadeIn(); //找<h2>標籤後面的(answer)標籤 , 淡入淡出效果-淡入
      //$(this).next('.answer').slideDown(); //滑上滑下效果-滑下
      $(this).addClass('close');  //<h2>加上(減號)CSS 
   },
   function()
  {
    $(this).next('.answer').fadeOut(); //找<h2>標籤後面的(answer)標籤 , 淡入淡出效果-淡出
    //$(this).next('.answer').slideUp(); //滑上滑下效果-滑上
    $(this).removeClass('close');    //<h2>移除(減號)CSS 
   }
); // end of toggle()
}); // end ready
</script>

CSS(參考)︰
<style type="text/css">
h2 {
background: url(../_images/open.png) no-repeat 0 11px; /* '+' 圖片 */
padding: 10px 0 0 25px;
cursor: pointer;
}
h2.close {
background-image: url(../_images/close.png); /* '-' 圖片 */
}
.answer {
margin-left: 25px;
}
</style>

執行畫面(初始)︰

執行畫面(點選)︰

註︰收合功能另一項做法可參考Table折疊使用滑動slideDown&slideUp效果