今では珍しくもなくなったCSSだけでアコーディオンもググればたくさん出てきます。個人的にお世話になっているソースはあるのですが、今後もこれ以外は無いかな！と思ったので、備忘録として永久保存です。
目次
CSSだけでアコーディオン
何かと良く使われるアコーディオンこれ１つでPC版、スマートフォン版に使えて、更にレスポンシブにも対応です！
アコーディオンの仕様
- PCもスマホもソースは同じ
- レスポンシブ対応
- 開閉の時の＋ーなどはFontawesomeなど使わず、テキストのみ。
- 開閉は複数開ける（開いている状態で他のアコーディオンを開いても閉じない）
- アコーディオン内の文字量はテキスト量により変動される
基本編（初めは閉じてクリックで開く）
上記の仕様ではじめは閉じていて、クリックして開閉するものです。
応用編（初めは開いてクリックで閉じる）
上記の仕様ではじめは開いていて、クリックして開閉するものです。
最後に
良く使うアコーディオンで、他の方法も試したりしましたが、今回の紹介のソースが一番使いやすく、カスタマイズもしやすい感じです。PCとスマホと両方とも対応できるところも◎。
思っていた以上に利用される部分が多く、始めに開いてある状態でスタートと言う時にも対応できます。
Special Thanks
下記の記事を参考、コードをそのまま、あるいは改造して使用させていただきました。
下記の記事を参考、コードをそのまま、あるいは改造して使用させていただきました。
※リンクは張られていないものは、リンク先のサイトアドレスが変更もしくは見つからなくなったためです。
