<details> / <summary>

対応:		HTML5（2014）

『<details>』はクリックで開閉できるウィジェットを作成する要素で、『<summary>』はその開閉部分に表示される見出しラベルを指定します。

構文

<details>
  <summary>クリックして開く見出し</summary>
  <p>開いたときに表示されるコンテンツ</p>
</details>

属性一覧

属性	概要
open	『<details>』に付与すると、ページ読み込み時から内容を開いた状態で表示します。

サンプルコード

sample_details_summary.html

<!-- 閉じた状態で始まるアコーディオン -->
<details>
  <summary>HTMLとは何ですか？</summary>
  <p>HTMLはHyperText Markup Languageの略で、Webページの構造を記述する言語です。</p>
</details>

<!-- 最初から開いた状態 -->
<details open>
  <summary>CSSとは何ですか？</summary>
  <p>CSSはCascading Style Sheetsの略で、HTMLで作った構造に見た目を付けるための言語です。</p>
</details>

<!-- 複数のリストを入れることもできる -->
<details>
  <summary>主なプログラミング言語</summary>
  <ul>
    <li>JavaScript</li>
    <li>Python</li>
    <li>PHP</li>
    <li>Swift</li>
  </ul>
</details>

実行結果

1つ目の項目は閉じた状態（▶ HTMLとは何ですか？）、2つ目は最初から開いた状態（▼ CSSとは何ですか？ + 内容）で表示されます。見出し部分をクリックするたびに開閉します。

サンプルページはこちら

CSSでカスタマイズする

ブラウザデフォルトの▶マーカーをCSSで非表示にしたり、オリジナルのアニメーションを追加できます。

<style>
  /* デフォルトの▶マーカーを非表示にして独自マーカーに変更 */
  details summary {
    cursor: pointer;
    list-style: none; /* Firefoxのデフォルトマーカーを消す */
    padding: 12px 16px;
    background: #f5f5f5;
    border-radius: 4px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
  }
  details summary::-webkit-details-marker {
    display: none; /* Chrome/Safariのデフォルトマーカーを消す */
  }

  /* 独自の開閉アイコン（+/-）を::afterで追加 */
  details summary::after {
    content: "+";
    font-size: 1.2em;
    color: #4a90e2;
    transition: transform 0.2s;
  }
  details[open] summary::after {
    content: "−";
  }

  /* コンテンツエリア */
  details .content {
    padding: 16px;
    border: 1px solid #eee;
    border-top: none;
    border-radius: 0 0 4px 4px;
  }

  /* FAQ風スタイル */
  details {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 8px;
  }
  details[open] summary {
    border-radius: 4px 4px 0 0;
    background: #e8f0fe;
  }
</style>

<details>
  <summary>HTMLとは何ですか？</summary>
  <div class="content">
    <p>HTMLはHyperText Markup Languageの略で、Webページの構造を記述する言語です。</p>
  </div>
</details>

<details>
  <summary>CSSとは何ですか？</summary>
  <div class="content">
    <p>CSSはCascading Style Sheetsの略で、HTMLで作った構造に見た目を付けるための言語です。</p>
  </div>
</details>

JavaScriptでtoggleイベントを検知する

開閉の状態変化は『toggle』イベントで検知できます。開いたときにコンテンツを動的に読み込む遅延ロードなどに応用できます。

<details id="lazySection">
  <summary>詳細を表示する（クリックで読み込み）</summary>
  <div id="lazyContent">読み込み中...</div>
</details>

<script>
var details = document.getElementById('lazySection');
var content = document.getElementById('lazyContent');
var loaded = false;

// toggleイベント: 開閉のたびに発火する
details.addEventListener('toggle', function() {
  if (details.open && !loaded) {
    loaded = true;
    // 初回オープン時にのみコンテンツを非同期で読み込む
    setTimeout(function() {
      content.textContent = 'コンテンツを読み込みました！';
    }, 500);
  }
});
</script>

概要

『<details>』と『<summary>』を使うと、JavaScriptを一切使わずにアコーディオン（開閉式）UIを実装できます。FAQ（よくある質問）・用語集・長い補足説明を折りたたむ場合などによく活用されます。

『<summary>』は必ず『<details>』の最初の子要素として記述します。『<summary>』を省略した場合、ブラウザが自動的に「詳細」などのデフォルトラベルを表示しますが、必ず明示的に書くようにしましょう。『<summary>』の中には見出し（『<h2>』〜『<h6>』）や『<span>』などのインライン要素を入れることもできます。

開閉の状態はJavaScriptの『toggle』イベントで検知することもでき、開いたときにコンテンツを動的に読み込む遅延ロードにも応用できます。CSSの『details[open]』セレクタを使えば、開いた状態だけにスタイルを適用することも可能です。