Details element with HTML5

GitHubに何かの実行結果を貼ることはよくあるのですが、その中でも縦にながーい行数のテキストを貼る際はよくdetailsタグを使って折りたたんでいます(なるべくそういったものは貼りたくないですが...)。

このタグは使いたいと思った時なかなかワードが出てこないのでメモる(検索してもhtml5以前のjsとかcssでなんとかする記事ばかりヒットする)。

detailsタグはhtml5から導入されたタグで、開閉する要素を簡単に作れるものです。長いログも折りたたんで貼ることが出来るのでコメント欄がスッキリします。

• details 要素 | HTML5 タグリファレンス | W3 Watch Reference

こんな感じで書くと...。

<details><summary>hogeコマンド実行結果</summary>
hoge

hoge

hoge

hoge

...

hoge
</details>

こうなる。

便利。