HTMLの`<details>`要素でJavaScriptなしのトグル表示を綺麗に実現する方法

ハイサイ！オースティンやいびーん！

概要

HTMLの<details>要素を使うことによって簡単に見え隠れする文章を実装することができます。

<details>要素の使い方

早速例に入りたいのですが、<details>の他に、その中に入る<summary>要素もセットで必須になります。

<summary>は、<details>が開かれていない時にも常に見えている要素です。

以下の例を見ましょう。

See the Pen Detailsれい by メイヤーオーステイン (@nklvbxkl-the-flexboxer) on CodePen.

<h3>をクリックするだけで開かれますし、また閉じられます。JavaScriptを一切使わずに済むので便利です。

<details>をJavaScriptで開く方法

他の何らかのロジックがあってJavaScriptで<details>を開閉したいときは以下のように、openの属性を操れば良いです。

const details = document.querySelector('details');

setInterval(() => details.toggleAttribute('open'), 2000);

See the Pen Untitled by メイヤーオーステイン (@nklvbxkl-the-flexboxer) on CodePen.

toggleイベントを受信して他のロジックに繋ぐ

さらに、<details>の開閉のたびに｀toggle`というイベントが配信されます。

これを受信すれば、他のロジックを引き起こすことも可能です。

const details = document.querySelector('details');
const statusP = document.querySelector('#status');

setInterval(() => details.toggleAttribute('open'), 2000);

details.addEventListener('toggle', () => {
  const isOpen = details.open;
  statusP.innerText = isOpen ? 'Open' : 'Closed';
});

See the Pen Details toggle example by メイヤーオーステイン (@nklvbxkl-the-flexboxer) on CodePen.

まとめ

以上、簡単なHTMLのご紹介でしたが、いかがでしょうか？

<details>要素を使うことにより、自分が書いている複雑なロジックを少しでもスッキリさせられたらいいなと思います！

JavaScript依存症の昨今、HTMLだけでもできること、ネイティブでできることの大切さを改めて実感できたらいいなと思います。