このブログも記事が増えてきました。
カテゴリページなんかでは、すぐに目的の記事を探し出せるように一覧化したい一方で、MTで概要をそのまま並べるとどんどん冗長になっていきます。
そこで、今回、アコーディオンを実装してみました。
どこからかライブラリを拾ってこようと思ったのですが、jQueryで実装すると簡単みたいだったので、自作してみました。
前提として、以下のようなHTMLコーディングだったとします。
<div class="accordion">
<div class="title"><h2>タイトル</h2><img src="img.gif" alt="開閉ボタン" width="20" height="20" /></div>
<div class="outline">
概要概要概要概要概要概要概要概要
</div>
<div class="title"><h2>タイトル</h2><img src="img.gif" alt="開閉ボタン" width="20" height="20" /></div>
<div class="outline">
概要概要概要概要概要概要概要概要
</div>
<div class="title"><h2>タイトル</h2><img src="img.gif" alt="開閉ボタン" width="20" height="20" /></div>
<div class="outline">
概要概要概要概要概要概要概要概要
</div>
</div>
「開閉ボタン」をクリックすると、概要の部分がアコーディオン風に開閉する。そのようなプログラムをjQueryで実装すると以下のようになります。