details要素での開閉時にJavaScriptで処理を行う

以前にdetailsタグの使い方やアコーディオンとして使用した際のメリットについて記事にしましたが、今回は開閉時にJavaScriptで何らかの処理を追加する方法を試してみます。

サンプルコード

以前と同じようにdetailsタグを使ったアコーディオンを実装します。

<details class="accordion" open>
  <summary class="accordion-header">リゼ・ヘルエスタ</summary>
  <div class="accordion-panel">
    <p>ヘルエスタ王国の第二皇女。<br>
      文武両道学園主席、真面目で誰にでも優しくかなりの人望がある。<br>
      王位継承の資格者として日々鍛錬や人とのコミュニケーションを大事にしている。</p>
    <p>ファンアート：<a href="https://twitter.com/hashtag/%E3%83%98%E3%83%AB%E7%B5%B5%E3%82%B9%E3%82%BF">#ヘル絵スタ</a></p>
  </div>
</details>
～ 略 ～

details要素の開閉時のイベントはtoggleで取得できます。
例として、開閉時にconsoleを表示するようにしてみます。

const details = document.querySelectorAll('.accordion');
details.forEach((d) => {
  d.addEventListener('toggle', (e) => {
    const t = e.currentTarget;
    if(d.open) {
      console.log(t, '開いた時の処理');
    } else {
      console.log(t, '閉じた時の処理');
    }
  });
});

注意点として、open属性を付与して最初に開いた状態にした場合、ページにアクセスした時点でtoggleイベントが発火するようです。
details要素の開閉イベントを取得するデモページ