写真サイトのランキングページにアコーディオンを組み込む
アコーディオンを組み込むのは、前回までも作例として使ってきた趣味の写真サイト「JPhoto.net」です。お手本サイトでは新着順の作品紹介に使われていたアコーディオンですが、JPhoto.netでは写真の人気ランキングを紹介するページに組み込んでみたいと思います。
まず、何も組み込んでいない状態のソースコードと画面は以下のようになっています（元になる作例ページ）。
組み込む前の状態。画像がずらっと展開表示されています
■元のHTMLファイル
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" href="css/init.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<title>JPhoto.net - Ranking -</title>
</head>
<body>
<div id="contents">
<h1>JPhoto.net</h1>
<ul id="globalMenu">
<li><a href="top.html" id="menu-top">Top</a></li>
<li><a href="photo.html" id="menu-gallery">Gallery</a></li>
<li><a href="seacrh.html" id="menu-search">Search</a></li>
<li><a href="ranking.html" id="menu-ranking" class="current">Ranking</a></li>
<li><a href="info.html" id="menu-info">Information</a></li>
</ul>
<br style="clear:both;">
<img src="images/shared/rank.gif">
<div id="acc1">
<h2>top 1 | 北の丸公園で太陽とススキ</h2>
<div>
<img src="photo/photo103.jpg">
<div>＃103 Location：Tokyo Date：08-10-24 Tag：Nature</div>
</div>
<h2>top 2 | 多摩川土手で出会う</h2>
<div>
<img src="photo/photo107.jpg">
<div>＃107 Location：Tokyo Date：07-07-15 Tag：Nature</div>
</div>
<h2>top 3 | 夕日を浴びる京急線</h2>
<div>
<img src="photo/photo109.jpg">
<div>＃109 Location：Tokyo Date：08-09-01 Tag：Nature</div>
</div>
<h2>top 4 | 聖路加ガーデンから臨む</h2>
<div>
<img src="photo/photo108.jpg">
<div>＃108 Location：Tokyo Date：08-9-19 Tag：Architecure</div>
</div>
<h2>top 5 | そうだ、京都行こう</h2>
<div>
<img src="photo/photo099.jpg">
<div>＃099 Location：Kyoto Date：04-03-20 Tag：Girls</div>
</div>
<h2>top 6 | 夕暮れ時の二月堂</h2>
<div>
<img src="photo/photo6.jpg">
<div>＃097 Location：Nara Date：07-08-13 Tag：Architecure</div>
</div>
<h2>top 7 | 地面に落ちた葉</h2>
<div>
<img src="photo/photo105.jpg">
<div>＃105 Location：Tokyo Date：07-11-13 Tag：Nature</div>
</div>
<h2>top 8 | 倉敷川から横道へ</h2>
<div>
<img src="photo/photo102.jpg">
<div>＃102 Location：Kurashiki Date：08-08-11 Tag：Architecure</div>
</div>
<h2>top 9 | 群馬の冬</h2>
<div>
<img src="photo/photo100.jpg">
<div>＃100 Location：Gunam Date：07-03-01 Tag：Nature</div>
</div>
<h2>top10 | 東京ステーションのある夜</h2>
<div>
<img src="photo/photo095.jpg">
<div>＃095 Location：Tokyo Date：07-09-01 Tag：Architecure</div>
</div>
</div>
<img src="images/shared/rank2.gif">
<div id="footer">
<p>Copyright JPhoton.net 2008 all rights reserved.</p>
</div>
</div>
</body>
</html>
Accordionライブラリを組み込むには、折りたたんだり展開する部分を必要な数だけ以下の形式で書いておきます。
クリックすると展開されるパネルタブにはスタイルシートクラスの「accordion_toggle」、表示されるパネル内容は<div>タグで囲んでスタイルシートクラスの「accordion_content」を指定します。
<h2 class="accordion_toggle">パネルタブに表示する文字</h2>
<div class="accordion_content">
パネル内に表示する内容
</div>
今回の作例の場合は、パネル内には画像とキャプションを表示しておき、ボタンクリック操作でキャプションの表示と消去を切り替えるようにします。そこで以下のように、表示する内容部分に<img>タグとキャプションを表示する<div>タグ、クリックボタンとなる<a>タグを書きます。
<h2 class="accordion_toggle">パネルタブに表示する文字</h2>
<div class="accordion_content">
<img src="画像のURL">
<div class="captionOff">キャプションです。</div>
<a href="#" class="capButton">▲</a>
</div>これを10回繰り返してランク１～10まで作成します。作成したら、最後に全体を<div>タグで囲み、ID名をつけておきます。ここでつけたID名は後にスクリプトで指定するためのものです。アコーディオンはページ内にいくつでも作成、表示できるので、ここでは1番目のアコーディオンということで「acc1」と名前をつけました。
