【HTML】でシンプルなアコーディオンを作成する

<details>タグと<summary>タグを使用してシンプルなアコーディオン（折りたたみ式コンテンツ）を作成する方法を以下に示します。

Simple Accordion

Section 1

This is the content of section 1.

Section 2

This is the content of section 2.

Section 3

This is the content of section 3.

HTML


<!-- アコーディオンのセクション -->
<details>
  <summary>Section 1</summary>
  <p>This is the content of section 1.</p>
</details>

<details>
  <summary>Section 2</summary>
  <p>This is the content of section 2.</p>
</details>

<details>
  <summary>Section 3</summary>
  <p>This is the content of section 3.</p>
</details>





CSS




/* オプション：アコーディオンのスタイル */
  details {
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
  }
  summary {
    cursor: pointer;
    outline: none;
  }
  summary:hover {
    background-color: #f0f0f0;
  }