[JS]div要素やリスト要素を折りたたんで配置するWAI-ARIA遵守のスクリプト -jQuery Collapse

実装は超簡単、カスタマイズ性にも優れ、IE6にも対応、クリックで開閉する折りたたみコンテンツを設置するjQueryのプラグインを紹介します。

サイトのキャプチャ

jQuery Collapse
jQuery Collapse -GitHub

jQuery Collapseの特徴

軽量
約600バイトの軽量スクリプト。
クロスブラウザ対応
IE6+, Firefox3+, chrome5+, Safari4+, Opera10+ でテスト済み。
カスタマイズ
モジュール式で設計しているため、簡単にカスタマイズが可能。
開閉する要素の変更、callback関数も用意されています。
クッキーのサポート
jquery-cookie」を利用してクッキーをサポート。
ARIA遵守
障害のある人に対しても適切にコンテンツを提供するようWAI-ARIAに遵守して設計。

jQuery Collapseのデモ

デモは上記ページをはじめ、ダウンロードファイルにもシンプルなデモが含まれています。

デモのキャプチャ

jQuery Collapse: Options

デモのキャプチャ

jQuery Collapse: Features

デモのキャプチャ

GitHubのデモページ(ダウンロードファイル)

jQuery Collapseの使い方

HTML

トリガーとなる要素は見出し要素(h3)、その直下で開閉するコンテンツはリスト要素でもdiv要素でも構いません。それらをdiv要素で内包します。
トリガーのh3要素、開閉するリスト要素・div要素はカスタマイズ可能です。

<div id="demo">
    <h3>Fruits</h3>
    <ul>
        <li>Apple</li>
        <li>Pear</li>
        <li>Orange</li>
    </ul>
    <h3>Info</h3>
    <div>
        <p>You can use any container you like (in this case a div)</p>
    </div>
</div>

外部ファイル

jquery.js」と当スクリプトを外部ファイルとして記述します。

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

クッキーを利用する場合は「jquery.cookie.js」も記述します。

<script src="jquery.cookie.js"></script>

JavaScript

jQueryのセレクタ(#demo)で開閉するコンテンツを内包する要素を指定します。

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

スクリプトのオプション

スクリプトのオプションでは、

  • show
    コンテンツを表示します。
  • hide
    コンテンツを隠します。
  • head
    トリガーとなるクリック可能な見出し。
    デフォルト:h3
  • group
    開閉するエレメント。
    デフォルト:ul, div
  • cookieName
    クッキーの名前
    デフォルト:collapse

top of page

©2017 coliss