bl6.jp

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

[ads_center]

使い方

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

jQuery Collapse | webcloud

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

コンテンツが折りたたまれる時のアニメーションなどを設定できます。

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