The CSS-Only Accordion Effect - CSSnewbie

CSSだけでアコーディオン風ＵＩを実現するサンプル。
通常、アコーディオンを実装する場合はJavaScriptが必要ですが、PureCSSで実現したものが公開されています。



:hover の際に高さを変えるというテクニックを使っているようで、沢山の情報をコンパクトにまとめられる魅せ方として使えそう。
当然アニメーションしませんが、サクっと軽く動作する感じもなかなかよいですね。

関連エントリ

• コンテンツをブロック内でスクロールさせられる「Easy Scroll」
• カーソル位置によって自動スクロールする小窓実装ライブラリ