ソースを貼り付け・ちょっと改変するだけで使える即席コード
たった数行書くだけでアコーディオンメニューができちゃいます！！
jQueryのコードなのであらかじめjQueryを読み込ませておいてくださいね！

必要なjsはたったこれだけ。
“.MenuTtl”の部分は適宜変更してください。
jQueryのバージョンが1.7以下の場合は.onの部分を.bindに！

$(function() {
$(".MenuTtl").on("click", function() {
$(this).next().slideToggle();
});
});

htmlは<dl>タグを使うといいでしょう。
<dt>をクリックすれば<dd>が開きます。
<dd>のなかに更にリストタグでメニュー項目を入れておきます。

<dl class="Menu">
<dt class="MenuTtl">メニューのタイトル</dt>
<dd><ul>
<li>メニューの中身</li>
<li>メニューの中身</li>
<li>メニューの中身</li>
</ul></dd>
</dl>

初期状態でメニューを隠しておく場合はCSSで隠しておきましょう。

.Menu dd {
display: none;
}

■□■カンタンに解説していきます■□■

MenuTtlクラスの要素をクリックすると次にある要素が開いたり閉じたりします。
$(this).next() の部分を表示したい要素に書き換えれば次の要素でなくても表示/非表示が可能です。
slideToggle() を使っているので伸び縮みするようなエフェクトがかかります。
slideToggle(“fast”) などとすると表示速度がコントロールできるのでリファレンスを参考に調整してください。
Toggle（トグル）はON/OFFをひとつのスイッチで切り替えられる仕組みを言います。電気つけたり消したりするのがそうですね。

ちょっと使えると便利なので、備忘録がわりに書いてみました。
ね、カンタンでしょ？（ボブ・ロス風）