STEP 1 | detailsタグsummaryタグで作るアコーディオンUIサンプル

概要

折りたたまれている部分です。

Q. buttonタグでもアコーディオンは作れそうですが？

A. detailsタグとsummaryタグがオススメです。

Q. inputタグでも作れますよね？

A. detailsタグとsummaryタグがオススメです。

Q. アコーディオンのアニメーションがなんか変です！期待通りに動作しなくて困っています…。どうすればよいでしょうか。

A. 以下のポイントを見直してみましょう。

アコーディオンの中身(summaryタグのすぐ下)をdivタグなどで囲った部分には上下paddingを持たせないこと。
デフォルトの挙動を無効化（preventDefault()）して、手動でopen属性を管理できているか。
アコーディオンを閉じるとき（detailsタグのopen属性が取り除かれるとき）は一瞬で非表示になるので、アニメーション完了を待ってからopen属性を手動で取り除くこと。

Q. 目次が見たいのですが。