details タグの使い方【HTML】

details タグとは？

details タグを使用すると簡単に開閉メニューを作成できます。

HTMLだけで折りたたみ可能な仕組みを提供してくれます。

アコーディオンメニューとも呼ばれるようです。

以下のサンプルのヘッダー部分をクリックしてみてください。開閉します。

コードのサンプルです。

<details class="love-language" open>
 <summary class="summary">人気のプログラミング言語2023</summary>
 <ol>
  <li>JavaScript</li>
  <li>Python</li>
  <li>Java</li>
  <li>PHP</li>
 </ol>
</details>

details タグの簡単な使い方

• details タグの中に「summaryタグ」と「本文」を置きます。
• details タグの最初の子要素がsummaryタグであること。
• summaryタグにはラベルやタイトルなどを記述すると良いでしょう。
• details タグにopen属性を付けると最初から開いた状態になります。デフォルトでは閉じています。

code例

<details>
  <summary>Sample</summary>
  <p>contents1</p>
  <p>contents2</p>
</details>

summaryタグの範囲をクリックすると内容を開閉します。

Firefox、Vivaldi、Safari、Chrome、Edge、で、想定通り動作することを確認しました。

補足

summaryタグを忘れるとsummary部分に”詳細”と表示されました。皆さんは忘れないでくださいね。

イベントの処理

details タグはtoggleイベントに対応しています。

<script>
  const tex = document.getElementById("target6");
  const elemen = document.getElementById("details11");
  elemen.addEventListener("toggle", event => {
    if (elemen.open) {
      tex.textContent = "Open!";
    } else {
      tex.textContent = "Close!";
    }
  });
</script>

details タグに”toggle”イベントの処理を割り当てています。

ボタンで開閉してみよう

JavaScriptからopen属性を変更します。これは真理値です。

element.open = true | false で開閉可能です。

btn = document.getElementById('btn');
btn.addEventListener('click', () => {
  det = document.getElementById('det');
  if (det.open) {
    det.open = false;
  } else {
    det.open = true;
  }
}, false);

アイコンの変更

summaryタグはdisplay: list-itemが適用されています。通常であれば「▶」のアイコンが表示されていると思います。

それでは、アイコンを変更してみましょう。

「list-style-type」や「list-style-image」を変更してアイコンを変更します。

Firefox、Vivaldi、Chrome、Edge、で、動作確認できました。

こちらも学習しておいたほうが良きですね。list-style – mdn –

アイコン変更に未対応のブラウザ

Safariは未対応でした。（2023年1月）

対応している場合は以下のようにアイコンが変更されます。

Safariなどのwebkitのブラウザでアイコンを変更する場合は、「CSS 擬似要素 ::-webkit-details-marker 」を使用します。

summary::-webkit-details-marker { display: none } を使用して「▶」を消した後、擬似要素でアイコンを表示すると良いでしょう。

アイコンの回転を考慮する

さて、先ほどの例ですと、開閉時にアイコンが回転していませんね。回転するようにしてみたいと思います。

開閉時にアイコンを回転させる場合は属性セレクタ”[open]”を使用します。

開いたときに違うアイコンを指定します。

<div class="div12">
<details class="ls-7">
<summary>ls-7</summary>
<p>[open]セレクタを利用してアイコンを開閉で変更する</p>
</details>
</div>

.ls-7 {user-select:none;}
.ls-7 summary {list-style-image: url("arrow2-16.png");}
.ls-7[open]>summary {list-style-image: url("arrow2-16-bottom.png");}
.ls-7[open]>summary::after { content: "(open)";}

擬似要素でアイコンを実装した場合は、transform: rotate(90deg) でも良きですね。

details タグと一緒に使えるおすすめのCSS

あったほうが良きかなと思いました。

• cursor: pointer：summaryのhoverで、マウスカーソルをポインターに変更する。ユーザーがクリックできることに気づきやすくなるかな。
• user-select:none：文字列の選択を禁止する。少し早めにクリックすると選択してしまうのが嫌だったので。

ただの補足

summaryタグを書かなかった場合の動作

• そもそもsummaryタグを忘れることは無いとは思いますが。
• detailsタグにsummaryタグを書かなかったとき、「詳細」と表示されました。
• このとき、自動でsummaryタグが生成されているわけではないようです。tbodyとは違うようですね。
• 昔のことですが、summaryタグが無いとき、ブラウザによってsummaryのクリック範囲が異なりました。safari系だと「▶」アイコン部分しかクリック範囲がありませんでした。
• HTML、CSSはどんどん進化しているだなと感じました。
• ちなみにW3CのValidateでエラーになります。
• Markup Validation Service

内部的にはshadowDOMとslotが使用されているようだ

• 開発者ツールの設定の「ユーザーエージェント シャドウDOMを表示」をONしておきます。
• 開発者ツールでdetails部分を確認すると、shadowDOMが確認できます。

その他

• CSSの制御で開閉はできない。CSSからは属性は変更できない。

関連する記事

• 擬似要素のbeforeとafterで画像を表示する方法【CSS】
• 擬似クラスと擬似要素の違いを確認してみよう

参考文献

• <details>: The Details disclosure element
• <summary>: The Disclosure Summary element
• 4.11.1 The details element
• 4.11.2 The summary element
• Can I use details?
• Can I use summary?
• Markup Validation Service
• かわいいフリー素材集「いらすとや」アコーディオンのイラスト