コンテンツの折りたたみができるアコーディオン機能をつける方法について。

折りたたむコンテンツを指定する

まず、折りたたむコンテンツに対して次のようなdivタグを書きます。

<div class="accordion-content">折りたたむコンテンツ</div>

class属性のaccordion-contentは好みの名前に変更しても大丈夫です。

折りたたみボタンを作る

次に、クリックした時にコンテンツを折りたたむボタンを作ります。ボタンを表示したい箇所に次のタグを書きます。

<button type="button" class="accordion-toggle">折りたたみボタン</button>

class属性のaccordion-toggleは好みの名前に変更しても大丈夫です。

折りたたみのJavaScriptを書く

最後に、headタグの中に次のJavaScriptを書きます（要jQuery）。

<script type="text/javascript">
$(function() {
    var toggleSelector = ".accordion-toggle";
    var contentSelector = ".accordion-content";
    $(toggleSelector).hide();
    $(toggleSelector).click(function() {
        $(contentSelector).slideToggle(500);
    });
});
</script>

toggleSelectorには折りたたみボタンのclass属性、contentSelectorには折りたたむコンテンツのclass属性を指定します（先頭のドットを忘れずに）。

また、折りたたみの時間を変える事もできます。方法は数字で500と書いている部分を適当な値に変えます（単位はミリ秒）。