こんにちは、友馬です。
今回は、コンテンツを格納するのに便利なトグルUIを実装してみました。
実装方法は以下の２通り。
- CSS3のみでの実装
- jQuery使用した実装
ソースコードをここに記載すると結構長くなってしまうので、ラボに作ったデモページで確認していただければと思います。
デモ：
ラボではCSSのbefore要素でボタンを作りましたが、ここら辺は環境やデザインにあわせてお好みで。
どちらも複数個のトグルに大して動くように実装しましたが、幅広いデバイスやブラウザに対応する場合は今のところjQuery版の方が安定しているかと思います。