標準の開閉機能
<details>の中に<summary>を置くだけで、クリックやキーボード操作で開閉できます。開いている状態はopen属性で表され、JavaScriptからも切り替えられます。
見た目を変えるとき
標準の三角マークは、summaryにlist-style:noneと::-webkit-details-markerの指定で消せます。独自のアイコンを付ける場合も、summaryがキーボードでフォーカスできる状態は保ってください。
排他的に開く表示
複数のdetailsに同じname属性を付けると、1つを開くと他が閉じる表示にできます。ただし、対応しているブラウザのバージョンに差があるため、使う前に確認してください。