JavaScript

超簡単にコンテンツを折りたたんで表示・非表示させるjQuery Collapseの使い方

jQueryプラグイン「jQuery Collapse」を使えばとても簡単に折りたたみコンテンツを実装することができます。クリックするごとに表示・非表示を切り替えられるのでスペースの有効活用になりますしレイアウトもスッキリ見せることができるので使う機会もありそうですね。折りたたむ要素はデフォルトでdivとulなのですが、オプションを指定することでolにしたりといったカスタマイズも簡単にできます。以下使い方です。

[ads_center]

使い方

使い方はとても簡単です。以下のサイトからプラグインをダウンロードします。

jQuery本体とプラグインを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.collapse.js"></script>

折りたたむコンテンツを内包している要素を指定します。

<script>
$(function() {
    $(".demo").collapse();
});
</script>

HTMLは以下のように記述していきます。デフォルトではh3をクリックする度に表示・非表示を切り替えるので、h3に折りたたむコンテンツのタイトルを指定して、その直後にdivやulでコンテンツをマークアップしていきます。

<div class="demo">
    <h3 class="active">タイトル1</h3>
    <ul>
        <li>リスト</li>
        <li>リスト</li>
        <li>リスト</li>
    </ul>
    <h3>タイトル2</h3>
    <ul>
        <li>リスト</li>
        <li>リスト</li>
        <li>リスト</li>
    </ul>
    <h3>タイトル3</h3>
    <div>
        <p>サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト</p>
    </div>
</div>

h3にクラス名activeをつけると、そこのコンテンツが展開された状態でページが読み込まれます。ちなみにオプションを指定することで、h3をh4などに変更することもできます。

オプション

いくつかオプションの紹介です。オプションを指定する場合は以下のようにして指定します。

$(".demo").collapse({
    head: "h4",
    group: "div, ul, ol",
    show: function(){
        this.animate({
            opacity: 'toggle', 
            height: 'toggle'
        }, 300);
    },
    hide : function() {
        this.animate({
            opacity: 'toggle', 
            height: 'toggle'
        }, 300);
    }
});

ちなみに上記のオプションはサンプルページで作ったサンプル3に指定しているオプションです。

head
ここで設定した要素をクリックすることでコンテンツを開閉させます。例えばh4を指定すると、h4要素をクリックすることでコンテンツが開閉されます。
group
折りたたまれるコンテンツの要素を指定できます。デフォルトはdivとulです。
show
コンテンツが展開される時のアニメーションなどを設定できます。
hide
コンテンツが折りたたまれる時のアニメーションなどを設定できます。

ということで、とてもシンプルで使いやすいプラグインでした。

関連記事

  1. fullPage.js

    JavaScript

    フルページでコンテンツごとにスクロールする「fullPage.js」

    fullPage.jsはフルページでコンテンツごとにスクロールするレス…

  2. no-image
  3. Stripe.Com Navigation

    JavaScript

    コンテナがアニメーションで可変するナビゲーション「Stripe.Com Navigation」

    ナビゲーションメニューのコンテナがアニメーションで可変するドロップダウ…

  4. Typed.js

    JavaScript

    プログラムを入力するようにタイプするエフェクトを実装できる「Typed.js」

    Typed.jsは、プログラムを入力するように文字をタイプしてくれるエ…

  5. no-image

    JavaScript

    セクション間をスムーズにスクロールできる「Scroll Control」

    Scroll Controlはセクション間をスムーズにスクロールできる…

  6. TV Credits

    JavaScript

    垂直・水平方向に滑らかに流れていくティッカーを実装できるjQueryプラグイン「TV Credits…

    TV Creditsは垂直方向や水平方向に流れていくティッカーを実装す…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. YAECA ワイドテーパードデニム 10-13WW
  2. ADR-3ML39シリーズ
  3. キュレル モイスチャーバーム
  4. FUJIFILM X-Pro3
  5. iPhone 11 ProとApple Watch Hermès

アーカイブ

PAGE TOP