グラビカ学習帳～新宿のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

できるだけ簡単にできるアコーディオンメニューをさがしていて
下記の記事を見つけました。

jQuery アコーディオンメニュー
http://php.o0o0.jp/article/4138817358715040

もーすばらしく簡単で便利です。
デフォルトで空けておきたい部分も指定できます。
自分で作ってみたサンプル


【javascript】
----------------------------------------------

$(function () {
  // デフォルト開く部分を指定
  $('ul').eq(0).show();
  $('span').click(function() {
    // メニュー表示/非表示
    $(this).next('ul').slideToggle('fast');
  });
});

【CSS】
----------------------------------------------

ul {
  display: none;
}
span {
  cursor: pointer;
}

【HTML】
----------------------------------------------

<span>メニュー 1</span>
<ul>
<li><a href="#">メニュー 1-1</a></li>
<li><a href="#">メニュー 1-2</a></li>
<li><a href="#">メニュー 1-3</a></li>
</ul>
<span>メニュー 2</span>
<ul>
<li><a href="#">メニュー 2-1</a></li>
<li><a href="#">メニュー 2-2</a></li>
<li><a href="#">メニュー 2-3</a></li>
</ul>
<span>メニュー 3</span>
<ul>
<li><a href="#">メニュー 3-1</a></li>
<li><a href="#">メニュー 3-2</a></li>
<li><a href="#">メニュー 3-3</a></li>
</ul>