HTMLタグのdetailsとsummaryだけでアコーディオンメニューが作成可能

アコーディオンメニューとは

選択した項目が広がって詳細な内容を表示する形式のメニューのこと。

jQuery全盛期にはslideToggle()を使用して作成しているWebサイトが多く存在した。

$('dt').on('click', function() {
  $('dd').slideToggle();
});

slideToggle()を使用したアコーディオンメニューのサンプル

jQueryを使用せずにアコーディオンメニュー

2014頃になるとCSSアニメーションを使用したWebサイトが増えてきて、アコーディオンメニューもjQueryを使用せずJavaScript+CSSが増えてきた。

jQueryなしで動作するので現在はこの手法がよく利用される。

dt, dd {
  cursor: pointer;
  padding: 10px;
  border: 1px solid #000;
}
dt {
  border-bottom: none;
}
dd {
  overflow: hidden;
  margin: 0;
  transition: 0.3s all;
}
dd:not(.open) {
  height: 0;
  padding: 0 10px;
}

var dt = document.querySelector('dt')
var dd = document.querySelector('dd')
dt.addEventListener('click', () => {
  dd.classList.toggle('open')
})

JavaScript+CSSのアコーディオンメニュー

HTMLで作成したアコーディオンメニュー

最近ではGitHub上でHTMLのdetailsだけで作成したアコーディオンメニューを見かけることが多い。

HTMLだけなのでアニメーションにはならないがJavaScriptやCSSが不要なのでGitHubなどのMarkdownの表示などで見かける。

※IEとEdgeでは使用できないので、絶対に表示させたくない場合は注意が必要。

<details>
  <summary>toggle</summary>
  <div>Hello world!</div>
</details>

detailsタグサンプル (HTMLのみ)

detailsタグサンプル (見やすいようCSSで調整)