HTMLだけでアコーディオンを作る

アコーディオンを使った動きをつけるには、JavascriptやCSSなどを利用して実装したりしますが、HTML要素だけでも簡単にアコーディオンの動きを作ることができます。

実装方法

HTMLだけでアコーディオンを実装するためには、「details」と「summary」要素を使います。

<details>
  <summary>項目</summary>
  ここに項目に対する説明文などを記述する
</details>

<details>～</details>がアコーディオンとなる部分で、<summary>～</summary>で囲った部分をクリックすると開閉するという仕組みになります。

ただ、このままではクリックできる箇所なのかが分かりずらいので、CSSを使って少しカスタマイズします。

カーソルポインターを変更する

カーソルのポインターを変えることでクリックできる場所であることを分かりやすくしてあげます。

summary {
  cursor: pointer;
}

クリックしたときの点線が気になる場合は、「outline: none;」を使って消すこともできます。

summary {
  outline: none;
}

矢印を変更する

デフォルトで表示される三角の矢印ではなく、違うリストマークを表示したい場合は画像を読み込むことで変更することができます。

//Chrome・Safari用
summary::-webkit-details-marker {
  color: transparent;
  background: url(画像パス) no-repeat center;
}

//Firefox用
summary {
  list-style-image: url(画像パス);
}

ChromeやSafariの場合は、まずデフォルトの三角マークを「color: transparent;」で非表示（透明）にしてから背景画像として表示させます。Firefoxの場合は、「list-style-image」を使って画像を表示させることができます。

最初から開いている状態にする場合

初めから説明文の箇所を開いた状態にしておきたい場合は、details要素に「open」を付与することで開いた状態にしておくことができます。

<details open>
  <summary>項目</summary>
  openの付いた箇所は初めから開いた状態になる
</details>

開いたときのデザインを変えたい場合

開いたときに背景の色を変えたいなどちょっとしたデザインを加えたい場合は、details要素に対してopen属性を指定することで変えることができます。

details[open] {
  background: #327fa8;
}

transitionを使えばふわっとした動きをつけることもできます。また、details要素とsummary要素に高さを指定してtransitionと組み合わせれば、すーっと伸びるようなアニメーションにもなります。

• DEMO

以上が、HTMLだけでアコーディオンを作成する方法となります。