アイコン設置用のタグでアイコンを作る場合

概要
折りたたまれている部分です。
Q. buttonタグでもアコーディオンは作れそうですが?

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

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

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

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

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

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

summaryタグの疑似要素でアイコンを作る場合

概要
折りたたまれている部分です。
Q. buttonタグでもアコーディオンは作れそうですが?

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

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

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

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

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

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