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
コンテンツが折りたたまれる時のアニメーションなどを設定できます。

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

CSSでテキストを円や波のように配置してくれるジェネレーター「CSSWARP」を使ったみた前のページ

今後もお世話になりそうな無料写真素材サイトをまとめてみた次のページ

関連記事

  1. jQuery-TimelineMe

    JavaScript

    シンプルなタイムラインを簡単につくれる「jQuery-TimelineMe」

    jQuery-TimelineMeは、タイムラインを簡単に構築すること…

  2. no-image

    JavaScript

    1日のイベントスケジュールを作成できる「Jquery Layoutday plugin」

    Jquery Layoutday pluginは、1日のイベントスケジ…

  3. Salvattore
  4. Zooming

    JavaScript

    クールな画像ズーム機能を実装できる「Zooming」

    Zoomingはクールでかっこいい画像ズーム機能を実装することができる…

  5. Holmes

    JavaScript

    ページ内で特定のテキストを高速に検索してくれるライブラリ「Holmes」

    Holmesは、ページ内部を簡単にかつ高速に検索してくれるライブラリで…

  6. Jquery Toast Plugin

    JavaScript

    高いカスタマイズ性を備えたトースト通知を実装できる「Jquery Toast Plugin」

    Jquery Toast Pluginは高いカスタマイズ性を備えたアニ…

コメント

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

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

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP