例
上記は、ラジオボタンの選択に連動して、フォーム要素を非表示にする例です。
擬似クラス :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;
}