jQuery日本語リファレンス

開閉式のメニューを作る

よくある開閉するメニュー（リファレンスTOPでもやってます）の実装は、slideToggle()を使えば簡単に出来ます。
例えばこのサイトの左側に出ているメニューでは

[HTMLソース]

<div id="navi">
     :
<h4>API</h4>
<ul class="sub">
<li><a href="/jquery/api/core/">Core</a></li>
<li><a href="/jquery/api/selectors/">Selectors</a></li>
<li><a href="/jquery/api/attributes/">Attributes</a></li>
<li><a href="/jquery/api/traversing/">Traversing</a></li>
<li><a href="/jquery/api/manipulation/">Manipulation</a></li>
<li><a href="/jquery/api/css/">CSS</a></li>

<li><a href="/jquery/api/events/">Events</a></li>
<li><a href="/jquery/api/effects/">Effects</a></li>
<li><a href="/jquery/api/ajax/">Ajax</a></li>
<li><a href="/jquery/api/utilities/">Utilities</a></li>
</ul>
     :
</div>

[Javascriptソース]

<script><!--
$(document).ready(function(){
  $('#navi > h4').click(function(){
    // 引数には開閉する速度を指定します
    $(this).next().slideToggle('slow');
  });
});
//-->
</script>

とこのようになります。

ここでは、HTMLの構造上「h4の次のブロックを開閉する」としているのでこれで動作しますが、togglerの指定方法については実際のページでの構造にあわせることになるでしょう。