こんにちは
htmlタグのdetailsというのは知っていますか?
僕も初めて知ったのですが、使い所によってはかなり便利だと思うので紹介します。
codepenに使用例を書いたのでご覧ください
detailsの使用例
<details>
<summary>close test</summary>
close
</details>
<details open>
<summary>open test</summary>
open
</details>
これだけでアコーディオン実装が可能です。
details要素はtoggleイベントにも対応していますので
要素が開いた後に何かをしたい場合はjsで処理をかけます。
めちゃくちゃ便利なのですが、問題も。。。
・IE、edgeは非対応
・アニメーションは現状付けれない
IEどうにかなりませんかね?????
参考サイト
MDN