CSS

CSSのみでアコーディオンリスト2パターン


CSSのみで動くアコーディオンリストを2パターン紹介します。

チェックボックスを利用して、チェックが入っている項目の中身を表示する仕組みになっています。
動きの違いがわかりやすいように、transitionの時間をおそ~くしてあります。
調整すればもっと自然に動きます。

上のリストは、中身が丸ごと上から降りてくるような動き。
下のリストは、次の項目が下にずれて、隠れていた中身が見えるような動きですね。

上の要素の欠点は、top値をマイナスして要素を上に隠しているため、上から降りてくる時間がやや長いこと。反応が遅く感じるかもしれません。閉じるときは早いです。
下の要素はmax-height指定をしているので、閉じるときに遅いです。

なぜおとなしくheightにしないのか?というと、transitionの対象をheightにしてもうまく動かないブラウザがあったからです(;´Д`)

See the Pen CSSのみでアコーディオンリスト by natsumi (@mayo31) on CodePen.18228

用途によってはこれで十分な場合もありますね。
ただ、汎用性がないのでこだわるなら要素の高さを取得して設定するようなjsも絡ませる必要があります。
jsを使ったアコーディオンリストはまたこんど!

スポンサードリンク

菜摘

Web制作がメインですがときどきフライヤーデザインやCDラベルなどDTP系もやってます。 デザイナーだったはずがhtml/cssコーディングに目覚めた。 黒い画面は相変わらず怖い。 javascriptはこのごろちょっと頑張ってるよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です