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. Horizontal Timeline

    JavaScript

    水平方向のタイムラインを実装できる「Horizontal Timeline」

    Horizontal Timelineは水平方向に移動可能なタイムライ…

  2. no-image

    JavaScript

    SVGによるドーナッツ状(円形)のチャートを実装できる「donutty」

    donuttyはSVGによるドーナッツ状(円形)のチャートを実装できる…

  3. JavaScript

    JavaScriptの基本構文を忘れた!って時にサクっと見たい10項目

    最近はよくjQueryプラグインを使ったりすることが多くなってきたので…

  4. no-image

    JavaScript

    続きを読むボタンを実装できる「ReadMorePlugin」

    ReadMorePluginは「続きを読む」、「もっと読む」、「Rea…

  5. FREVR

    JavaScript

    シンプルな無限スクロールを実装できるjQueryプラグイン「FREVR」

    FREVRはシンプルで軽量な無限スクロールの機能を実装することができる…

  6. no-image

    JavaScript

    レスポンシブ対応でモバイルフレンドリーなjQueryデートピッカー・タイムピッカー「pickadat…

    pickadateはレスポンシブに対応したモバイルフレンドリーなデート…

コメント

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

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

最近の記事

  1. ミノン メン 薬用全身シャンプー
  2. ウェアラブルヒーター ネック

アーカイブ

PAGE TOP