【Labs】detailsとsummaryでアコーディオン

こんにちは（・∀・）

アコーディオンといえば、今まではjQueryやCSSを使って実装してきましたが、それらを使わなくともアコーディオンは実現することができます。

detailsとsummaryでアコーディオン

detailsタグで囲んだ部分がアコーディオンとなります。summaryタグをクリックすると本文が表示されます。

sample

それではサンプルをご覧ください。

demo

HTML

<details>
<summary>コンテント1</summary>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</details>

あまりないとは思いますが、本文を最初から開いておきたい場合はdetailsタグにopen属性を追加すると実現します。

HTML

<details open>
<summary>コンテント2</summary>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</details>

また、CSSを使うことなくアコーディオンを実現することができますが、必要に応じてCSSを使うのも良いと思います。

CSS

details {
  height: 10px;
  transition: 2s;
  padding: 10px;
}
details[open] {
  height: 200px;
  background: #eee;
}
summary {
  cursor: pointer;
  list-style-image: url(ar-r.png);
}
summary::-webkit-details-marker {
  background: url(ar-r.png) no-repeat;
  color: transparent;
}

ボタン部分の枠はoutline: noneで消すこともできますが、アクセシビリティ上残しておくことをオススメします。

また、ボタン部分に表示される三角形の矢印も変更することができます。

その場合、list-style-imageで画像を指定しますが、そのままではChromeとSafariでは表示されないので、ベンダープレフィックスを使用します。

よろしければぜひお試しください。

関連リンク

【CSS3】CSSだけで横方向に展開するサイズ可変・スマホ対応のアコーディオン
【CSS3】CSSだけでサイズ可変・スマホ対応のアコーディオン
【jQuery】jQueryでスマホ画面は縦方向PC画面は横方向に展開するアコーディオン
【jQuery】jQueryでサイズ可変・スマホ対応のアコーディオン

参考

CSSすら不要！detailsとsummaryタグで作る簡単アコーディオン