CSSやJavascriptを使わずにHTMLだけで折りたたみスライドメニューを作る

HTML5の新タグで
<details></details>
と
<summary></summary>
というタグがある。

<details></details>の中に
<summary></summary>と折りたたみにしたい文やリンク等の項目の要素を書く。
<summary></summary>の中には折りたたみが何なのか示す表題を書く。

例)
<details>
<summary> 表題 </summary>
<p>文章</p>
<p>文章</p>
<p>文章</p>
</details>
↓

・ブラウザ上での動き

<style>
summary {
outline:none;
}
summary::-webkit-details-marker {
display:none;
}
</style>

もう既に消してあるのだけど、スタイルシートに上のコードのセレクタと値を指定するとoutlineでリンクを押した時に出る青い枠が消せる。-webkit-details-markerで三角の開閉アイコンが消せる。