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

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

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

First Weblog
リンク先へはこちらをクリック

今回ご紹介するのは、上記の「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">折りたたみスイッチ1</h3>
<div>
    <p>折りたたまれるコンテンツ1</p>
</div>
<h3 class="toggle" id="contents2">折りたたみスイッチ2</h3>
<div>
    <p>折りたたまれるコンテンツ2</p>
</div>

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

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

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

このようになります。

この記事が気に入ったらシェアしてください

関連記事

jQueryでチェックボックスを操作する方法まとめ【2021年版】

jQueryでチェックボックスを操作する方法まとめ【2021年版】

jQueryプラグイン「Colorbox」でYoutube動画をモーダルで表示してみる(レスポンシブ対応済)

jQueryプラグイン「Colorbox」でYoutube動画をモーダルで表示してみる(レスポンシブ対応済)

jQueryプラグイン「Colorbox」でHTMLタグや外部HTMLファイルをモーダルで表示してみる

jQueryプラグイン「Colorbox」でHTMLタグや外部HTMLファイルをモーダルで表示してみる

簡単にモーダルウィンドウを実装できるjQueryプラグイン「Colorbox」

簡単にモーダルウィンドウを実装できるjQueryプラグイン「Colorbox」

SyntaxHighlighterでの表示を色々カスタマイズしてみる

SyntaxHighlighterでの表示を色々カスタマイズしてみる

クリックするとトリガーが×になるドロワーメニュー

クリックするとトリガーが×になるドロワーメニュー

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)