アコーディオン

detailsシンプルアコーディオン

  • HTML
  • CSS

項目をクリックすると、対応する各内容がアニメーションなしで開閉するシンプルな構成のアコーディオンです。

See the Pen Untitled by 早稲田電子IT教育センター (@wit-it) on CodePen.

  1. <details>タグだけで開閉します。
  2. cssやjavascriptを組み合わせ、アニメーションを追加するベースとしても使えます。

detailsアコーディオン
（展開アニメーション）

  • HTML
  • CSS

項目をクリックすると、対応する各内容がアニメーションをし展開します。再度項目をクリックする事で、内容が閉じた状態に戻ります。内容展開時、右側に配置した▼が回転します。

See the Pen 【アコーディオン】details版 by 早稲田電子IT教育センター (@wit-it) on CodePen.

  1. <details>タグだけでも開閉はできますが、アニメーションを付けるために、展開時の動作や▼アイコンの回転には transition を使用しています。
  2. 現在の動作は排他動作となっていますが、<details>タグ内のname属性を削除すれば排他動作を解除でき個々に開閉できるようになります。
  3. <details>の内容展開部分は、::details-contentを使用し余計な<div>タグなどで囲わなくても動作するようにしています。
  4. <details>タグを使用しているため、キーボード操作などにも対応しておりアクセシビリティ（A11y）を考慮したアコーディオンになっています。
  5. 注意点として、展開時の設定に入っているmax-height: 50em; は50文字分の高さで指定されているので、50文字分以上の高さになると表示が切れてしまうので、適宜ご自身のコードに合わせて調整してください。

アコーディオン
（ARIA準拠）

  • HTML
  • CSS
  • JS

項目をクリックすると、対応する各内容がアニメーションをし展開します。再度項目をクリックする事で、内容が閉じた状態に戻ります。内容展開時、右側に配置した▼が回転し上に向きます。

See the Pen 【アコーディオン】ARIA準拠 by 早稲田電子IT教育センター (@wit-it) on CodePen.

  1. アクセシビリティ（A11y）を考慮し、キーボード操作などにも対応したアコーディオンになっています。
  2. 内容部分の高さはJavascriptを使用して高さを取得しているため、どんな高さの内容でも柔軟に対応できます。