【CSS3】inputタグのcheckbox属性を活用したアコーディオンボタンの作り方

ポイントはCSSセレクターの「:checked」に在り

使用する場面は異なりますが、似たような使い方をする例として、リンクボタンを作成する際、:hoverを使用してマウスカーソルがボタン上に位置する時に背景色を変更するという使い方はよくあると思います。

それと要領は同じでcheckboxにチェックがついている時の状態を表す:checked内でコードを記述し、チェックがついていないときは非表示になるように、逆にチェックがついているときは表示する。という感じで状況差を作り出し可変可能な仕組みを実装していきます。

See the Pen qBdmzJQ by Todd (@threefrog) on CodePen.

jqueryで作成するアコーディオンメニューの作り方YouTubeへ

コメントを残す

メールアドレスが公開されることはありません。