HTMLのみの記述でアコーディオンを設置する。

お久しぶりですsu-sanです。

長すぎる文章だったり、補足項目だったりにちょっとした部分に折りたたみ（アコーディオン）が欲しい時ってありますよね？

今回はHTMLの記述のみでそうしたちょっとした部分にアコーディオンを追加する方法を書いていきたいと思います。

<details>
   <summary>ここが開くよ</summary>
　　　<div>　　　　　
   この要素が出ますよ
    </div>
</details>

<summary>ここが開くよ</summary>

　　　<div>　　　　　

この要素が出ますよ

</div>

</details>

下記が実行結果。

ここが開くよ

この要素が出ますよ

いかがでしょうか？かなり簡単にアコーディオンの実装ができたのではないでしょうか。

の部分で矢印がデフォルトで出てしまいますがcssに下記記述をすれば消すことができます。

details summary {
    color: transparent;
}
details summary span {
    color: #000;
}

details summary {

color: transparent;

}

details summary span {

color: #000;

}

以上！良いWEBライフを！