【jQuery 不要】複数の details 要素のうち1つだけを開く

複数の details 要素を並べたメニューを作ったとき、details 要素がいくつも開いた状態になるのが気になってしまいました。

その問題を解決しようと「アコーディオンメニュー　1つだけ開く」あたりで検索しても、やたらと jQuery を使う方法ばかり引っかかります。なんとかそれ以外の方法で解決することにしました。

そこで、複数の details 要素のうち1つだけを開いておく方法を調べたので記事にします。

この記事の目次

方法1：素の JavaScript を使う
方法2：details 要素の name 属性を使う

方法1：素の JavaScript を使う

以下が、details 要素, summary 要素と素の JavaScript を使ったアコーディオンメニューです。

メニュー1

メニュー1の内容がここに表示されます

メニュー2

メニュー2の内容がここに表示されます

メニュー3

メニュー3の内容がここに表示されます

メニュー1は予め開いてあります。メニュー1以外をクリックすると、メニュー1が閉じるのがわかると思います。

そしてこちらが、上のデモで使用した HTML と JavaScript です。

<details class="details-list" open="">
  <summary>メニュー1</summary>
  <p>メニュー1の内容がここに表示されます</p>
</details>

<details class="details-list">
  <summary>メニュー2</summary>
  <p>メニュー2の内容がここに表示されます</p>
</details>

<details class="details-list">
  <summary>メニュー3</summary>
  <p>メニュー3の内容がここに表示されます</p>
</details>

全ての details 要素に同じクラス名 .details-list を付けています。

// details.details-list をすべて取得
const detailsList = document.querySelectorAll('.details-list');

detailsList.forEach(details => {
  // 取得した details 要素にイベントリスナーを追加
  details.addEventListener('toggle', target => {
    // details 要素が展開された場合
    if(target.target.open){
      // 他の details 要素をチェックし、展開されているものがあれば閉じる
      details.forEach(other => {
        if(other !== target.target && other.open){
          other.open = false;
        }
      })
    }
  })
})

details 要素の開閉（open 属性の有無）は toggle イベントで検出できます。

HTMLDetailsElement: toggle イベント - Web API | MDN

開閉された details 要素自身は [引数].target で取得できるので、展開されたとき（self.target.open）のみ、他の details に open 属性が付いていたらその属性を消すようにしています。

Event: target プロパティ - Web API | MDN

今までイベントの発火元自体を取得するときには function 式の this を使っていましたが、アロー関数では同じ用途で this を使えないことを学びました。

↑ 目次に戻る

方法2：details 要素の name 属性を使う

前項では JavaScript で details 要素を操作してメニューを1つだけ開くようにしましたが、なんと details 要素の name 属性を使えば、HTML だけで同じ状態を再現できます。

これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます | コリス

以下が、details 要素とその name 属性, summary 要素を使ったアコーディオンメニューです。