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. nanoGALLERY
  2. jRCarousel

    JavaScript

    モダンエフェクトなレスポンシブ対応のカルーセル実装「jRCarousel」

    jRCarouselはモダンエフェクトなカルーセルを実装できるjQue…

  3. Micromodal.js

    JavaScript

    アクセシブルで軽量なモーダルダイアログを実装できる「Micromodal.js」

    Micromodal.jsは、アクセシブルでファイル容量も軽量なモーダ…

  4. Unite Gallery

    JavaScript

    レスポンシブな画像・動画ギャラリーを実装できる「Unite Gallery」

    Unite Galleryは、レスポンシブに対応した画像・動画ギャラリ…

  5. formBuilder

    JavaScript

    ドラッグ&ドロップでフォームを手軽につくれる「formBuilder」

    formBuilderはドラッグ&ドロップでフォームを手軽につくること…

コメント

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

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

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP