お久しぶりですsu-sanです。
長すぎる文章だったり、補足項目だったりにちょっとした部分に折りたたみ(アコーディオン)が欲しい時ってありますよね?
今回はHTMLの記述のみでそうしたちょっとした部分にアコーディオンを追加する方法を書いていきたいと思います。
1 2 3 4 5 6 |
<details> <summary>ここが開くよ</summary> <div> この要素が出ますよ </div> </details> |
下記が実行結果。
ここが開くよ
いかがでしょうか?かなり簡単にアコーディオンの実装ができたのではないでしょうか。
の部分で矢印がデフォルトで出てしまいますがcssに下記記述をすれば消すことができます。
1 2 3 4 5 6 |
details summary { color: transparent; } details summary span { color: #000; } |
以上!良いWEBライフを!