details 要素

details 要素は閲覧者が操作可能な、開閉式のウィジットを表します。所謂、折りたたみメニュー（所謂、アコーディオン UI）が簡単に作成できます。また、open 属性によって最初から開いた状態を指定したり、name 属性をつかって、複数の details 要素をグループ化し、グループ内の details 要素が 1つ開いたら、他を閉じる、といった動作をさせることも可能です。

対応ブラウザであれば、下記に開閉式メニューが表示ます。

なお、details 要素が開いた状態では、ブラウザによって自動的に open 属性が付与されるため、CSS セレクタから状態を取得することが可能なほか、JavaScript の toggle イベントでも取得することができます。詳しくは下記のサンプルソースをご覧ください。

/* details 要素が開いた状態は下記のように CSS セレクタでマッチできます。 */
details[open] {
  background-color: yellow;
}

// details 要素の状態の変化は JavaScript でも取得可能です。
const detailsList = document.querySelectorAll('details');

detailsList.forEach((details) => {
  details.addEventListener('toggle', (event) => {
    if (details.open) {
      // details 要素が開いている
    } else {
      // details 要素が閉じている
    }
  });
});

open 属性

open 属性が指定されると、ページ読み込み時に初期状態で details 要素の内容を表示します。open 属性は論理属性です。

name 属性

details 要素に付与された name 属性値は、details 要素をグループ化します。

複数の details 要素に name 属性で同じ名前を付けると、それらはグループと見なされ、相互に排他的な動作、つまり「1つを開いた時に他を閉じる」という動作を実現できます。

<details open="open">
 <summary>コンテンツメニュー</summary>
 <details>
  <summary>HTML</summary>
  <ul>
   <li><a href="/html5/tag.html">HTML5 タグリファレンス</a></li>
   <li><a href="/html5/info.html">HTML5 の基礎知識</a></li>
   <li><a href="/html5/link.html">HTML5 に関するリンク集</a></li>
  </ul>
 </details>
 <details>
  <summary>CSS</summary>
  <ul>
   <li><a href="/css/tag.html">CSS リファレンス</a></li>
   <li><a href="/css/info.html">CSS の基礎知識</a></li>
   <li><a href="/css/link.html">CSS に関するリンク集</a></li>
  </ul>
 </details>
</details>

<!--
details 要素に name 属性で同じ名前を付けると、それらはグループ化され、
相互に排他的な動作、つまり「1つを開いた時に他を閉じる」という動作を実現できます。
-->
<details open="open">
 <summary>コンテンツメニュー</summary>
 <details name="content-menu">
  <summary>HTML</summary>
  <ul>
   <li><a href="/html5/tag.html">HTML5 タグリファレンス</a></li>
   <li><a href="/html5/info.html">HTML5 の基礎知識</a></li>
   <li><a href="/html5/link.html">HTML5 に関するリンク集</a></li>
  </ul>
 </details>
 <details name="content-menu">
  <summary>CSS</summary>
  <ul>
   <li><a href="/css/tag.html">CSS リファレンス</a></li>
   <li><a href="/css/info.html">CSS の基礎知識</a></li>
   <li><a href="/css/link.html">CSS に関するリンク集</a></li>
  </ul>
 </details>
</details>

IE11	×
Edge（EdgeHTML）	×
Edge（Chromium）	○
Chrome	○
Firefox	○name 属性は未対応
Safari	○
iOS Safari	○
Android Chrome	○