一个不错的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吧