jQueryのAccordionプラグインを利用したアコーディオンメニュー

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

このサンプルは、jQueryのAccordion()プラグインを利用してアコーディオン型のメニューを表示します。[Title?]をクリックするとサブメニューが展開されます。

このサンプルは、jQueryのAccordion()プラグインを利用してアコーディオン型のメニューを表示します。[Title?]をクリックするとサブメニューが展開されます。 



    $(function() {
      $('#theMenu').Accordion({
        active: 'h3.selected',
        header: 'h3.head',
        alwaysOpen: false,
        animated: true,
        showSpeed: 400,
        hideSpeed: 800
      });
    }); 

<ul id="theMenu">
  <li>
    <h3 class="head">
      <a href="javascript:;">Title 1</a></h3>
    <ul>
      <li><a href="http://jsajax.com">Content 1 1</a></li>
      <li><a href="#">Content 1 2</a></li>
      <li><a href="#">Content 1 3</a></li>
    </ul>
  </li>
  <li>
    <h3 class="head">
      <a href="javascript:;">Title 2</a></h3>
    <ul>
      <li><a href="#">Content 2 1</a></li>
      <li><a href="#">Content 2 2</a></li>
      <li><a href="#">Content 2 3</a></li>
    </ul>
  </li>
 </ul>