一個不錯的JS摺疊效果

先點擊這裡看下效果吧

用法:

1.添加JS庫(點擊下截):

<script src="prototype.lite.js" type="text/javascript"></script>
<script src="moo.fx.js" type="text/javascript"></script>
<script src="moo.fx.pack.js" type="text/javascript"></script>

2.建立xhtml結構:

<div id="container">
    <H1 class="title"><A href="javascript:void(0)">(1)這裡放標題</H1>
    <div class="content">
        <p>(1)這裡放內容</p>
    </div>
    <H1 class="title"><A href="javascript:void(0)">(2)這裡放標題</H1>
    <div class="content">
        <p>(2)這裡放內容</p>
    </div><H1 class="title"><A href="javascript:void(0)">(3)這裡放標題</H1>
    <div class="content">
        <p>(3)這裡放內容</p>
    </div>
</div>
 

3.調用JS:

<script type="text/javascript">
    //定義contents 組數為所有將要顯示的內容
    var contents = document.getElementsByClassName('content');
    //定義contents 組數為所有標題，也是可點擊展開的按鈕
    var toggles = document.getElementsByClassName('title');
 
    //調用moofx JS庫
    var myAccordion = new fx.Accordion(
        toggles, contents, {opacity: true, duration: 400}   //opacity確定是否有alpha透明變化,duration確定動作所有時間
    );
    myAccordion.showThisHideOpen(contents[0]);  //預設開啟第一個內容
 </script>
 

完成.
簡單而且效果不錯吧
如果還要介面好看點，自已定義下CSS吧