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

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

jQuery Collapse
jQuery Collapse -GitHub

[ad#ad-2]

• jQuery Collapseの特徴
• jQuery Collapseのデモ
• jQuery Collapseの使い方

jQuery Collapseの特徴

軽量

約600バイトの軽量スクリプト。

クロスブラウザ対応

IE6+, Firefox3+, chrome5+, Safari4+, Opera10+ でテスト済み。

カスタマイズ

モジュール式で設計しているため、簡単にカスタマイズが可能。
開閉する要素の変更、callback関数も用意されています。

クッキーのサポート

「jquery-cookie」を利用してクッキーをサポート。

ARIA遵守

障害のある人に対しても適切にコンテンツを提供するようWAI-ARIAに遵守して設計。

jQuery Collapseのデモ

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

jQuery Collapse: Options

jQuery Collapse: Features

[ad#ad-2]

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