例
上記は、ラジオボタンの選択に連動して、フォーム要素を非表示にする例です。
擬似クラス :checked と、兄弟セレクタ ~ を組み合わせることで表示、非表示を簡単に実現することが出来ます。
html
<div class="test"> <form method="get"> <input type="submit" id="go" /> <input type="radio" name="group1" value="milk"/> Milk<br /> <input type="radio" name="group1" value="butter" /> Butter<br /> <input type="radio" name="group1" value="cheese"/> Cheese <div class="data-contents"> <div class="milk content"><input name="foo" value="" /></div> <div class="butter content"> <textarea> </textarea> </div> <div class="cheese content"> <select name="example"> <option value="サンプル1">サンプル1</option> <option value="サンプル2">サンプル2</option> <option value="サンプル3">サンプル3</option> </select> </div> </div>
CSS
input[value="milk"]:checked ~ .data-contents .milk{ visibility:visible; height:auto; } input[value="butter"]:checked ~ .data-contents .butter{ visibility:visible; height:auto; } input[value="cheese"]:checked ~ .data-contents .cheese{ visibility:visible; height:auto; } .content{ padding:1em; border:1px solid #ccc; visibility:hidden; position:absolute; width:100%; } .data-contents{ position:relative; margin-bottom:200px; }