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で三角の開閉アイコンが消せる。