[CSS]レスポンシブ対応、高さ可変のアコーディオンをピュアCSSで実装するテクニック

パネル全体の高さは可変、幅はレスポンシブ対応、各アイテムの中身は少なかったり多かったり、開閉はアニメーション、そんなアコーディオンをピュアCSSで実装するテクニックを紹介します。

異なる高さにアニメーションを適用するために「height」ではなく「max-height」を使用するアイデアがすごいです。

アコーディオンのデモ

アコーディオンのデモ

ピュアCSSのアコーディオンはたまに見かけますが、レスポンシブ対応でアニメーションを伴ったものは初めて見かけました。

デモのアニメーション

実際の動作は、下記ページでご覧ください。

サイトのキャプチャ

CSS Accordion

アコーディオンの実装

HTML

各パネルはラジオボタン・ラベル・テキストで構成されています。
下記のコードは2つ分ですが、実際のデモでは5つのパネルです。

CSS

実装のポイントは「height」の代わりに、アコーディオンパネルの「max-height」を設定することです。CodePenのページでは、SCSSの変数でアコーディオンの数・サイズ・カラーなどを簡単に変更できます。

sponsors

top of page

©2018 coliss