帶有多個面板的JQuery滑動面板

Question

我有這個jQuery代碼，可以在點擊時滑動內容。這段代碼起作用，我只想知道是否有更簡單的方法來做到這一點。我已經嘗試切片（）沒有運氣。我試圖找出一種方法來做到這一點，而不必爲我想要切換的每個項目編寫代碼。

感謝，

凱文

<script type="text/javascript"> 
    $("div.accord_panel").hide(); 
    $(document).ready(function() { 
     $("p.accord_header:eq(0)").click(function() { 

      $("div.accord_panel:eq(0)").slideToggle("slow"); 
      $("div.accord_panel:eq(1)").hide(); 
      $("p.accord_header:eq(1)").show(); 
     }); 
     $("p.accord_header:eq(1)").click(function() { 
      $("div.accord_panel:eq(1)").slideToggle("slow"); 
      $("p.accord_header:eq(0)").show(); 
      $("div.accord_panel:eq(0)").hide(); 
     }); 

    }); 
</script> 

而CSS：

p.accord_header 
    { 
     margin: 0; 
     padding: 0; 
     font-family: 'Helvetica Neue' , Helvetica, Arial, Sans-Serif; 
     color: #615E5A; 
     font-size: 9pt; 
     font-weight: bold; 
     background-color: #f3f0ed 
    } 
    div.accord_panel 
    { 
     margin: 0; 
     padding: 0; 
     font-family: 'Helvetica Neue' , Helvetica, Arial, Sans-Serif; 
     color: #615E5A; 
     font-size: 9pt; 
     display: none; 
     background-color: #f3f0ed 
    } 

和HTML：

<p style="text-align: -webkit-auto;" class="accord_header"><strong><span>+ El Salvador/San Diego de Tenango Task Force</span><br /> 
<br /> 
</strong></p> 
<strong> 
</strong> 
<div class="accord_panel"><strong><span>In partnership with Agros, Int'l since 2001, UPC has come alongside this rural village to encourage them as they move toward economic self-sufficiency. &nbsp;Most importantly we send service teams in January and July to renew friendships, share the love and gospel of Jesus Christ and participate in village activities.<br /> 
<br /> 
<br /> 
Julie Thomas // 425.881.6185</span><br /> 
</strong> 
</div> 
<p style="text-align: -webkit-auto;" class="accord_header"><strong><span>+ El Salvador/San Diego de Tenango Task Force</span><br /> 
<br /> 
</strong></p> 
<strong> 
</strong> 
<div class="accord_panel"><strong><span>In partnership with Agros, Int'l since 2001, UPC has come alongside this rural village to encourage them as they move toward economic self-sufficiency. &nbsp;Most importantly we send service teams in January and July to renew friendships, share the love and gospel of Jesus Christ and participate in village activities.<br /> 
<br /> 
<br /> 
Julie Thomas // 425.881.6185</span><br /> 

Answer 1

這裏是你的答案。 Jquery Tools，易於使用和ligthweight。

Answer 2

您只需將一個事件參數傳遞給click函數即可使用event.target屬性獲取單擊的元素，然後在滑動所有面板元素後滑動該元素的下一個.accord_panel兄弟：

$("p.accord_header").click(function(e) { 
    $("div.accord_panel").stop(true, false).slideUp(); 
    $(e.target).closest('p').next('.accord_panel').stop(true, false).slideDown(); 
}); 

這將適用於任何數量的標題和麪板。

See example here.