クッキーで開閉状況を保持してくれる折りたたみメニューを実装するjQuery【jquery.listfolder.js】

投稿日：2015/10/27 ｜最終更新：2015/10/28
JavaScript/jQuery

サイドメニューなどが長くなってしまう場合、折りたたみを使うと便利です。
メニュー以外にも、１ページ内に表示するコンテンツが多い場合、折りたたみを使うことでコンテンツを収納することができます。

今回ご紹介するのは、上記の「jquery.listfolder.js」です。

別ページに遷移すると開閉状況が保持されないことが多いですが、このjQueryプラグインは別ページに遷移したり画面を更新したりしても開閉状況が保持されるだけでなく、日本人の方が開発しているので解説も日本語でとても使いやすいプラグインです。

jquery.listfolder.jsの使い方

折りたたみを使いたいサイトのheadタグ内に下記ソースを参考に記述して下さい。

HTML＋JS例

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.listfolder.js"></script>
<script type="text/javascript">
jQuery(function() {
    jQuery('body').listfolder({
        sidebarClass: 'toggle',
        time: 200,
    });
});
</script>

bodyの部分は、折りたたみを行いたいリストを包含している要素やid属性など、何でも構いません。
sidebarClassオプションで、折りたたみを行うためのスイッチに利用するクラスを指定できます。デフォルトでは'sidetitle'になっています。
timeオプションで折りたたむ速度を設定できます。
その他オプションなど詳細はこちらをご覧下さい。

折りたたみをする部分のソースは下記のように記述してください。

<h3 class="toggle" id="contents1">折りたたみスイッチ１</h3>
<div>
    <p>折りたたまれるコンテンツ１</p>
</div>
<h3 class="toggle" id="contents2">折りたたみスイッチ２</h3>
<div>
    <p>折りたたまれるコンテンツ２</p>
</div>

折りたたむためのスイッチ用クラスはjQuery側でしています。
折りたたみスイッチに個別のIDを付与しておきます。
そうすると、画面を更新した際に開閉関係を保持できるようになります。

なお、折りたたむ要素は例にあるようなdiv要素だけでなく、スイッチのすぐ次の要素です。
たとえば、dl要素でこのプラグインを利用した場合は、

<dl>
    <dt class="toggle" id="contents1">折りたたみスイッチ１</dt>
        <dd>折りたたまれるコンテンツ１</dd>
    <dt class="toggle" id="contents2">折りたたみスイッチ２</dt>
        <dd>折りたたまれるコンテンツ２</dd>
</dl>

このようになります。