URLのフラグメント（#）からdetails要素を開く

details要素を使うことで、アコーディオンメニューのようなものが簡単に実装できる。ただし、details要素を開いた状態にするにはopen属性を付ける必要があり、内包される情報が隠蔽されてしまう。

そんなときはフラグメントを使うことで、URLの#で指定した要素が含まれるdetails要素を開いた状態でページを表示できる。

以下のようなHTMLがあるときに、https://example.com/page#fragment1 のようにフラグメントをつけると、「詳細情報」が展開される。

<details>
  <summary>詳細情報</summary>

  <section>
    <h3 id="fragment1">
      <a href="#fragment1">フラグメント1</a>
    </h3>
    <p>ここに詳細な情報を記述します。</p>
  </section>
</details>

デモ

参考

• Opening a Details Element from the URL – Frontend Masters Blog