[JS]タイル状のパネルをダイナミックに伸縮させるスクリプト -InfoGrid

グリッドに沿って配置されたパネルをダイナミックなアニメーションで伸縮させるスクリプトをCSS-Tricksから紹介します。

Grid Accordion with jQuery
デモページ

各パネルをクリックすると、ダイナミックなアコーディオンのアニメーションで伸縮されます。

二番目のパネルをクリック

各パネルはdl要素で実装されており、下記のようなHTMLになっています。

HTML

CSSはアクセシビリティに配慮されており、シャドウやRGBaなどCSS3のテクニックも使用されています。

スクリプトのベースにはjQueryが使用されており、ダイナミックなアコーディオンのアニメーションが実装されています。