2つ以上のボタンを連動させる
- シェアボタンとフォローボタンを連動させて、片方が開いているときは片方が閉じる。閉じるボタンを押せば両方とも閉じる。そのような連動した２つ以上のボタンを作りたい。
ココがポイント
結論：
input要素の「ラジオボタン」を使用することで、２つ以上のボタンを連動し、クリックすると格納してあるウィンドウが開いたり閉じたりするアクションを、CSSのみで設定ができる。
皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。
皆様は、Webページを作成していると、ボタンをクリックして格納してあるウィンドウを表示させる動きのあるページを作りたいと思ったことはございませんか？
このようにウィンドウを格納してあるボタンを複数作り、それぞれ片方が開くと片方が閉じるといった連動したものにしておきたくなることが、ページのレイアウト上必要になってくることがあると思います。
今回は、input要素の「ラジオボタン」を使用することで、HTMLとCSSだけで、連動した複数のボタンの作り方をご紹介していきます。
また、JavaScriptを使用して、フッターメニューのボタンからでも、開閉をコントロールする方法にも触れようと思います。
目次
1.「ラジオボタン」とは
「ラジオボタン」とは、複数の選択肢から単一の選択をするときに使う、input要素の属性です。name属性値を同じにすることで複数の選択肢をひとくくりに判別することができるようになります。
See the Pen
radio_button by 三好雄介 (@yusuke5028198)
on CodePen.
2.HTMLとCSSだけで複数のボタンを連動させる
「ラジオボタン」の「複数の選択肢から単一の選択をする」という特徴を活かすことで、それぞれの「閉じる」「シェア」「フォロー」のチェックが入ったときに起こすアクションを、CSSで決めることで目的の動きを実現できるようになります。
See the Pen
radio_button_HTML+CSS by 三好雄介 (@yusuke5028198)
on CodePen.
3.JavaScriptを使いフッターメニューから開閉を操作する
JavaScriptを使用することで、フッターメニューのボタンからでも開閉を操作できるようになります。
See the Pen
footer_radio_button by 三好雄介 (@yusuke5028198)
on CodePen.
3.1_「AFFINGER5」のスマホ用フッターメニューからでも操作ができる
WordPressのテーマ「AFFINGER5」にあるスマホ用フッターメニューの設定で、URLにユニークな値を入れておくと、JavaScriptのセレクタから個別のボタンを指定することができるようになります。この方法を使用して、「AFFINGER5」でもフッターメニューのボタンからそれぞれのウィンドウを開閉することができます。
4.「チェックボックス」を使用して開閉アクションを実装する方法
関連
まとめ
お疲れ様でした。
「ラジオボタン」を使用すると、同じname属性で括ったinput要素に、checked属性が必ず1つしかつかないようにできます。この機能で表示の入替を複数のボタンでもコントロールできるようにしています。
用途や目的に応じて、「チェックボックス」か「ラジオボタン」を使い分けると、望んだアクションに仕上げることができるでしょう。
最後までご一読いただき、ありがとうございました。
