form 表示と非表示


Milk
Butter
Cheese

上記は、ラジオボタンの選択に連動して、フォーム要素を非表示にする例です。

擬似クラス :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;
}

関連


新着記事

コメントは受け付けていません。