I'll be NET】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > 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>

このようになります。

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

関連記事

Instagramの写真一覧をサイトに表示する方法

Instagramの写真一覧をサイトに表示する方法

サムネイル画像をクリックするとメイン画像をふわっと切り替えるjQuery

HTML上の要素の位置を変更するjQuery

HTML上の要素の位置を変更するjQuery

JavaScriptで現在のURLを取得する方法

ロード時やスクロール時にふわっと表示させるjQuery

ロード時やスクロール時にふわっと表示させるjQuery

pixiv小説のように縦書き表示する方法-2019版

pixiv小説のように縦書き表示する方法-2019版

Comment Form

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

Profile

yuricolo@I'll be NET

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。