HTML5のdetailsとsummary: コンテンツの表示を制御する

<details>
  <summary>詳細を表示</summary>
  ここに隠されたコンテンツが表示されます。
</details>

<details class="details-demo">
  <summary class="summary-demo">詳細を表示</summary>
  ここに隠されたコンテンツが表示されます。
</details>

/* details要素全体のスタイリング */
.details-demo {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 20px;
    background-color: #f9f9f9;
    position: relative; /* 追加アイコンの位置指定のため */
}

/* summary要素のスタイリング */
.summary-demo {
    font-weight: bold;
    color: #333;
    cursor: pointer;
    outline: none; /* フォーカス時のアウトラインを削除 */
    list-style: none; /* デフォルトの三角形を非表示に */
}

/* summary要素の疑似要素にカスタムアイコンを追加 */
.summary-demo::before {
    content: '◎';
    font-size: 16px;
    color: red;
    margin-right: 5px;
    position: absolute; /* 絶対位置指定 */
    left: 0; /* 左端から配置 */
}

/* details要素が開いたときのsummaryのアイコンを変更 */
.details-demo[open] .summary-demo::before {
    content: '◉'; /* アイコンを変更 */
}

/* クリック可能な領域を示すためにマウスホバー時のスタイルを変更 */
.summary-demo:hover {
    background-color: #e8e8e8;
}

/* デフォルトのマーカーを消すための追加スタイル */
.details-demo summary::-webkit-details-marker {
    display: none;
}

<details>
  <summary>よくある質問1</summary>
  ここに答えを表示します。
</details>

<details>
  <summary>よくある質問2</summary>
  別の答えがここに表示されます。
</details>

<details>
  <summary>この投稿について3件のコメントがあります</summary>
  <p>コメント1: 素晴らしい記事です！</p>
  <p>コメント2: もっと詳しく知りたいです。</p>
  <p>コメント3: ありがとうございます！</p>
</details>

<details>
  <summary>第1層の情報</summary>
  ここに第1層の内容が表示されます。
  
  <details>
    <summary>第2層の詳細情報</summary>
    ここに第2層の詳細な内容が表示されます。

    <details>
      <summary>さらに深い第3層の情報</summary>
      第3層のさらに詳細な内容がここに表示されます。
    </details>
  </details>
</details>

details{
  padding-left: 20px
}