[JS]IE6にも対応、簡単設置のカスタマイズも容易なアコーディオンのスクリプト -Easy Accordion

テキストや画像、div要素などが配置されたパネルをアニメーションでスライドさせるアコーディオンを実装するjQueryのプラグインを紹介します。
アクセシブルで初期表示に任意のパネルを選択できるなど高性能な上、超軽量スクリプトなので、アコーディオンを導入する方は是非検討してみてはいかがでしょうか？

jQuery plugin: Easy Accordion
デモページ

[ad#ad-2]

Easy Accordionの主な特長

• IE6を含め、クロスブラウザ対応。
• スムースなアニメーションを伴ったアコーディオンを簡単に実装可能。
• 自動スライド、手動スライドの切り替えが可能。
• 同一ページに複数のアコーディオンを配置可能。
• 初期表示に任意のスライドを指定可能。
• 画像を使用しないで設置可能。
• カスタマイズが容易（高さ・幅・ボーダー・背景画像など）
• アクセシブルで、SEOにもフレンドリー。
• さまざまな種類のコンテンツ（テキスト・画像・リスト・div要素など）をスライド可能。
• 超軽量（8KB）！
• 商用利用でも無料（寄付は歓迎）

Easy Accordionの実装

HTML

アコーディオンの各パネルはdl要素で実装します。
「your-accordion-container」は任意の名前で、下記のJavaScriptと同じものを使用します。

JavaScript

jquery.jsと当スクリプトを外部ファイルとして指定し、下記のように記述します。

スクリプトのオプションでは、スライドの自動・手動、スライドのタイミングを調整できます。
下記の例は、5秒ごとに自動スライドするアコーディオンです。

CSS

アコーディオンのサイズやデザインは、スタイルシートで自由に指定できます。
スタイルシートに自信がない人はダウンロードしたファイル「index.html」内のCSSをそのまま使用するのがよいと思います。

最初に表示したいパネルを指定する際は、dt要素に「class="active"」を加えます。