スクリプトの組み込みと＋α部分の作成
では次にスクリプト部分の作業です。Accordionライブラリは「Prototype.js」ライブラリと、「Script.aculo.us」ライブラリの「effect.js」を使っているので、以下のように<script>タグを使って順番に各ライブラリを読み込ませます。
<script type="text/javascript" src="js2/prototype.js"></script>
<script type="text/javascript" src="js2/effects.js"></script>
<script type="text/javascript" src="js2/accordion.js"></script>これだけではまだアコーディオンとしては機能しませんので、以下のようにしてページの最後（</body>の直前）に<script>タグを書いて、アコーディオン機能を動作するように指定します。以下で指定している「acc1」は、アコーディオン全体を囲む<div>タグにつけたID名です。
<script type="text/javascript"><!--
new accordion("acc1");
// --></script>アコーディオン部分は、これでできあがりです。今回は、もう1つ、キャプションの表示・消去の機能が必要ですが、Accordionライブラリには同様の機能は用意されていません。そこで、以下のようなスクリプトも一緒に書いておき、キャプションの表示・消去ができるようにします。
$$("#acc1 .capButton").each(function(ele){
Event.observe(ele,"click", function(){
var ele1 = $(this).previous(".captionOff");
var ele2 = $(this).previous(".captionOn");
if (ele1){
ele1.removeClassName("captionOff");
ele1.addClassName("captionOn");
}
if (ele2){
ele2.removeClassName("captionOn");
ele2.addClassName("captionOff");
}
}, true);
});キャプションの表示と消去は、スタイルシートクラス名を追加、削除することで切り替えています。本来は1つのスタイルシートクラスの追加と削除だけでもよいのですが、より細かな処理をしたい場合（たとえば、完全に消すのではなく半透明にするなど）もあるかと思いますので、ここでは「captionOn」と「captionOff」の2つのスタイルクラスを切り替えるようにしました。captionOffがキャプションが表示されていない状態、captionOnがキャプションが表示されている状態のスタイルシートです。
また、アコーディオン全体を囲む<div>タグにつけたID名（「acc1」）は、$$("#acc1 .capButton")の部分でも使用しています。もし名前を変える場合には、この部分も忘れずに変更してください。
ここまでの作業ができたら、実際に動作するか確認してみましょう。以下の画面のようにアコーディオン機能が動くようになりましたか？
完成した作例。パネルタブをクリックすると内容が展開されます。さらに、「^INFORMATION」をクリックするとキャプションが表示されます。実際の動きはぜひ作例サイトで
次回は、これまでさまざまな機能を追加してきた作例サイト「JPhoto.net」の仕上げとして、最後に新しい技を紹介したいと思います。どうぞお楽しみに。
（作例デザイン：wataru）
（作例写真：2000ピクセル以上のフリー写真素材集）
■もっと勉強したい人のためのオススメBOOK（Amazon.co.jp）
- Head First JavaScript 頭とからだで覚えるJavaScriptの基本
- Michael Morrison 著、オライリージャパン 刊
- WebクリエイティブのためのDOM Scripting
- 中村享介 著、毎日コミュニケーションズ刊
- Ajaxライブラリリファレンス
- 古籏一浩 著、ビー・エヌ・エヌ新社刊
