CSSだけを使って、フォームのラジオボタンの選択によって異なる内容をアコーディオン表示する
jQuery版はこちらです。↓
[sbh_recmd id=2727 length=10]
[adsense]
サンプル
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)はこちら
コメント