jQuery 、jQuery UI の Accordionプラグイン を使用して、アコーディオン型コンテンツを表示します。

対象のプラグインを、下記より入手してください。
* jQuery
* jQuery UI

サンプル

サンプルソース

JavaScript + CSS

<script type="text/javascript" src="http://www.strollnet.com/js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.strollnet.com/js/jquery/ui.core.js"></script>
<script type="text/javascript" src="http://www.strollnet.com/js/jquery/ui.accordion.js"></script>
<link rel="stylesheet" type="text/css"
         href=" http://www.strollnet.com/js/jquery/css/black-tie/jquery-ui-1.7.2.custom.css" />

<script type="text/javascript">
<!--
   $(function() {
      $('#accordion').accordion({event:'mouseover', header: 'h3' });
            // event:"mouseover"を指定しなければクリックで開きます
   });
//-->
</script>

HTML

<div id="accordion">
   <div>
      <h3><$lta>First</a></h3>
      <div>サンプルサンプルサンプルサンプル</div>
   </div>
   <div>
      <h3><a>Second</a></h3>
      <div>
         サンプルサンプルサンプルサンプル<br />
         サンプルサンプルサンプルサンプル
      </div>
   </div>
   <div>
      <h3><a>Third</a></h3>
      <div>サンプルサンプルサンプルサンプル</div>
   </div>
</div>