新しいScript.aculo.usを使用したアコーディオンが強力だ

2007年9月19日

つい先日発表された新しいScript.aculo.usとPrototype.jsによって作られたアコーディオンが高機能かつ便利だなと思ったのでご紹介したいと思います。

Accordion v2.0

accordion2.0.jpg

特徴

使い方

実装は結構簡単で、外部リンクでJSライブラリを読み込みます。

<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/accordion.js"></script>

そしてトグル(引き金)となるタグにaccordion_toggleというクラスをつけ開閉するタグにaccordion_contentというクラスをつけます。

<h2 class="accordion_toggle">Title Bar</h2>
<div class="accordion_content">...</div>
...
...
...
<h2 class="accordion_toggle">Title Bar</h2>
<div class="accordion_content">...</div>

注意として、この手のモーションにおいて、すべてのコンテンツがクローズドの時に、アクセシビリティーが犠牲になるというネックがあります。その辺りを考慮した上で使うかどうか決めたほうが良さそうですね。

この記事について