左坊のメモ帳

WordPress など

*

【CSS版】フォームのラジオボタンで選んだ項目によって異なる選択肢を表示

   

CSSだけを使って、フォームのラジオボタンの選択によって異なる内容をアコーディオン表示する

jQuery版はこちらです。↓


スポンサーリンク

サンプル

ラジオボタン1
ラジオボタン2

ラジオボタン1を押した時に表示される内容です。
ラジオボタン2を押した時に表示される内容です。

htmlソース

<form>
<input type="radio" id="sbh1" name="test" value="ラジオボタン1"/><span>ラジオボタン1</span>
<input type="radio" id="sbh2" name="test" value="ラジオボタン2"/><span>ラジオボタン2</span>
<div class="sbh1">ラジオボタン1を押した時に表示される内容です。<input type="text"></div>
<div class="sbh2">ラジオボタン2を押した時に表示される内容です。<input type="text"></div>
</form>

CSSソース

.sbh1,.sbh2{display:none;}
input[type="radio"]:checked#sbh1~div.sbh1 {display:block;}
input[type="radio"]:checked#sbh2~div.sbh2 {display:block;}

ソースの説明

表示、非表示を制御したい部分(div)をdisplay:none;で非表示にしておいて、ラジオボタンがcheckedになったタイミングでdisplay:block;にしています。

CSSをどこに書くか(Wordpress)

ざっと3つの選択肢があります。

(1)テーマの追加CSSに書く
(2)プラグインを使う(「Simple Custom CSS and JS」を使ってます)
>>(1)(2)はこちら
(3)各ページ毎に書く(記事中に<style>タグで記述する)
>>(3)はこちら

 - CSS・html