このサンプルは、jQueryの各種APIを利用してアコーディオン型のメニューを表示します。見出し（タブ）をクリックするとサブメニューが表示されます。
$(function() {
$("dd:not(:first)").hide();
$("dt a").click(function() {
$("dd:visible").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
});
});
<dl>
<dt><a href="/">jQuery</a></dt>
<dd>
<ul>
<li><a href="http://jsajax.com">Download</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Blog</a></li>
</ul>
</dd>
<dt><a href="/">Community</a></dt>
<dd>
<ul>
<li><a href="#">Mailing List</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Demos</a></li>
<li><a href="#">Plugins</a></li>
</ul>
</dd>
<dt><a href="/">Development</a></dt>
<dd>
<ul>
<li><a href="#">Source Code</a></li>
<li><a href="#">Bug Tracking</a></li>
<li><a href="#">Recent Changes</a></li>
</ul>
</dd>
</dl>