jQuery toggleでアコーディオンメニュー

要素を押すとスライドして表示されるメニューを作る。

参考サイト

・超簡単jQuery！”toggle系メソッド”を使ってアコーディオンメニューやタブをさくっと実装する方法

slideToggleというのを使うとあっさりできるらしい。

これにちょっと手を加えて箇条書きリストの表示で作ってみる。

javascript

まずはjavascriptから。

/*---------------------------------------------------------------------------*/

<script type="text/javascript">

   $(function(){

       $("#accordion ul").on("click", function() {

           $(this).next().slideToggle();

       });

   });

</script>

/*---------------------------------------------------------------------------*/

accordionIDの下にある要素を弄くる。

css

/*---------------------------------------------------------------------------*/

#accordion ul#parent {

}

#accordion ul#child {

display:none;

}

/*---------------------------------------------------------------------------*/

とりあえず子要素を消すだけ。あとから色々デザインを変更できるように。

HTML

/*---------------------------------------------------------------------------*/

<div id="accordion">

<ul id="parent"><li>Parent</ul>

<ul id="child">

<li>Child

</ul>

</div>

/*---------------------------------------------------------------------------*/

これだけでできる。

便利だね。toggle。指定された要素の表示非表示を切り替えるメソッド。