javascript

jQuery不要のシンプルなjavascriptアコーディオンリスト


CSSのみでアコーディオンリスト2パターンではCSSのみで高さに汎用性がありませんでしたが、ちょこっとJavascriptを加えてあげることで気持ちよく動くアコーディオンリストができます。
ライブラリなどは不要です。
閉じるときのコードはたったの3行!

See the Pen accordion list by natsumi (@mayo31) on CodePen.18228

開くときにsetTimeoutが入る理由としては、一度隠れている要素の高さを取得するためにoverflow:visible;を指定して、そのままhiddenにして流してしまうとリフローが起きる前にhiddenになってしまい、高さが取得できない状態でheight(変数h)が設定されてしまうからです。
リフローを起こすためsetTimeoutをはさんで、そこまでの処理を一度描画させています。

リフロー・リペイントについてはこのあたりの記事が詳しいです。

大事なことなので2度言っておくと、ライブラリは不要です。
・・・が、お好みでVanilla JSを入れるのも良いかと思います。

スポンサードリンク

菜摘

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

コメントを残す

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