jQueryのslideToggleを使ったアコーディオンメニューのメモ

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js" async></script>
<script type="text/javascript">
  $(function(){
    $('.accordion-List').hide();
    //
    $('#accordion-Title').click(function(){
      $('+.accordion-List',this).slideToggle();
    });
  });
</script>

<style type="text/css">
  #accordion-Title { cursor:pointer; }
</style>

<h3 id="accordion-Title">リストタイトル（サンプル）</h3>
  <ul class="accordion-List">
    <li>リスト1</li>
    <li>リスト2</li>
  </ul>

コードはこんな感じでjQueryを読み込みslideToggle()を指定するだけ、下のサンプルがちゃんと動けばタイトルをクリックするとリストが現れ、もう一度クリックすると閉じるはず...。

リストタイトル（サンプル）

隠れているはずのリストが始めから表示されていたり、クリックしても動作しない場合は失敗です...。

 

独立した複数のアコーディオンがある場合

accordion-List1,accordion-List2など、idやclassを分けないと最初のアコーディオンしか動かないので注意が必要です。

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js" async></script>
<script type="text/javascript">
  $(function(){
    $('.accordion-List1').hide();
    //
    $('#accordion-Title1').click(function(){
      $('+.accordion-List1',this).slideToggle();
    });
  });
  $(function(){
    $('.accordion-List2').hide();
    //
    $('#accordion-Title2').click(function(){
      $('+.accordion-List2',this).slideToggle();
    });
  });
</script>

<style type="text/css">
  #accordion-Title1,#accordion-Title2 { cursor:pointer; }
</style>

<h3 id="accordion-Title1">リストタイトル（サンプル1）</h3>
  <ul class="accordion-List1">
    <li>リスト1-1</li>
    <li>リスト1-2</li>
  </ul>
<h3 id="accordion-Title2">リストタイトル（サンプル2）</h3>
  <ul class="accordion-List2">
    <li>リスト2-1</li>
    <li>リスト2-2</li>
  </ul>

以下がサンプル

リストタイトル（サンプル1）

リストタイトル（サンプル2）

この方法以外にもたくさんやり方はあるみたいなので、グーグルで「jQuery slideToggle」とか「jQuery アコーディオン slideToggle」と検索してみるといいかもしれません。

その他参考

Link

301 Moved Permanently

http://jqueryui.com/accordion/
PAGETOP