jQueryのAPIを利用したアコーディオンメニュー (Part2)

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQueryの各種APIを利用してアコーディオン型のメニューを表示します。見出し（タブ）をクリックするとサブメニューが表示されます。

このサンプルは、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>