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

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

jQuery版はこちらです。↓
[sbh_recmd id=2727 length=10]
[adsense]

1 サンプル
2 htmlソース
3 CSSソース
4 ソースの説明
5 CSSをどこに書くか（Wordpress）

サンプル

htmlソース

<form>
<input type="radio" id="sbh1" name="test" value="ラジオボタン１"/><span>ラジオボタン１</span>
<input type="radio" id="sbh2" name="test" value="ラジオボタン２"/><span>ラジオボタン２</span>
<div class="sbh1">ラジオボタン１を押した時に表示される内容です。<input type="text"></div>
<div class="sbh2">ラジオボタン２を押した時に表示される内容です。<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）

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

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