折りたたみできるコンテンツ表示JavaScript （Accordion.js）

コンテンツが長くなる場合に、部分的に折りたたむ（非表示）ことで、すっきりと表示させることができる。簡単にアコーデオン機能を実装できるのが、Accordion.js。prototype.js、scriptaculous.jsが動作には必要になる。

徐々にコンテンツなどで見かけるようになってきたアコーディオン表示だが、prototype.jsで利用できればぐっと身近な機能になる。アニメーションエフェクトにはscriptaculousが利用されていることもあり、非常に滑らかに動作してくれる。

オプション機能
実際に導入するには、JavaScriptコードを記述する必要があるが、解説を参考に作成すればそれほど難しくない。また、縦方向の表示以外にも横方向に伸縮させることも出来る。横方向に伸縮できるだけで、実際に利用したときの印象がかなり違いが出てくる。

ダウンロードファイルには必要なJavaScriptライブラリなど含まれている。サンプルコードは含まれないので、サイト上の解説を参照しながら、作成していただきたい。

アコーディオン表示をすることで、長いコンテンツもすっきりと表示することが出来る。デフォルトでオープンしている部分は問題ないが、特定の部分を表示してリンクさせたい場合などは別途対応する必要がある。URLのアンカー部分を取得して、JavaScriptで動的に開くようにすれば実装できるので、試していただきたい。