スクリプトを組み込もう
HTMLとCSSの設定が完了したら最後にスクリプトです。まず、Spry Frameworkの開閉パネルライブラリの「SpryCollapsiblePanel.js」ファイルを読み込ませます。
<script type="text/javascript" src="js/SpryCollapsiblePanel.js"></script>
ただし、どの部分を開閉させるのかをスクリプトで指定しないと、開閉パネルは機能しません。前々回、ツールチップを表示させるために作った「myscript.js」を再び利用して、開閉パネルの処理部分を追加しましょう。
開閉パネルの<div>タグでID名が「CollapsiblePanel1」の場合は、以下のようにスクリプトを書きます。
new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
今回の場合は3つあるので、以下のように書きましょう。
new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
new Spry.Widget.CollapsiblePanel("CollapsiblePanel2");
new Spry.Widget.CollapsiblePanel("CollapsiblePanel3");
開閉パネルが少ない場合にはこれでも十分ですが、10個もあると面倒ですし、後に開閉パネルの数が変わる場合に手間です。そこで、ツールチップの時と同じ方法を使って、短く書くことにします。開閉パネルには「名前＋番号」のID名を付けてあるので、以下のように書けば「CollapsiblePanel1～3」までが自動的に開閉パネルとして設定されます。
for (var i=1; i<=3; i++){
new Spry.Widget.CollapsiblePanel("CollapsiblePanel"+i);
開閉パネルが5つだったら「for (var i=1; i<=3; i++)」の「3」を「5」にします。2つだったら「3」を「2」にするだけです。これなら、開閉パネルの数が変化しても簡単に修正できて手間いらずですね。
なお、デフォルトでは、パネルは展開された状態になっていますが、以下のように追記すると最初から折り畳まれた状態になります。
for (var i=1; i<=3; i++){
new Spry.Widget.CollapsiblePanel("CollapsiblePanel"+i, { contentIsOpen:false });
}
また、開閉時にアニメーションがともなうようになっていますが、アニメーションさせたくない場合には以下のようにしましょう。
for (var i=1; i<=3; i++){
new Spry.Widget.CollapsiblePanel("CollapsiblePanel"+i, { enableAnimation:false });
}
これで完成です。狙いどおり、カテゴリ部分をクリックすると内容部分が開閉するようになれば成功です。ページ内容が長くなってもコンパクトにまとめることができるようになりました（完成した作例）。
左は最初の状態。ここで「What's new」の部分をクリックすると……アニメーションしながら内容が折り畳まれます（右）
今回までで「オレ流レシピ」のサイトもだいぶブラッシュアップされてきました。次回も新しい“技”を取り込んでいきたいと思います。ぜひお楽しみに。
（作例デザイン：wataru）
（作例写真：写真素材 足成）
■もっと勉強したい人のためのオススメBOOK（Amazon.co.jp）
- Ajaxライブラリで かんたんインターフェイスデザイン
- 古籏一浩 著、ビー・エヌ・エヌ新社刊
- 改訂第4版 JavaScript ポケットリファレンス
- 古籏一浩著、技術評論社刊
- CSS&JavaScript表現アイデア帖
- エム・ディー・エヌ刊
