チェックボックスで折りたたみ

Google先生に聞いてみると、皆さんとても複雑難解なソースを書いているようです。
こんなにシンプルにできるのに…

1●名入れ(315円)<input type="checkbox" onClick="a1.display=(this.checked?'':'none')"></br>
2<div id="area1" style="display:none">
3    名入れ名<input type="text" name="" value="">
4</div>
5<br>
6 
7●ギフト梱包(無料)<input type="checkbox" onClick="a2.display=(this.checked?'':'none')"></br>
8<div id="area2" style="display:none">
9    ギフトの種類<select><option>1</option><option>2</option><option>3</option><select><br>
10    ギフトメッセージ<input type="text" name="" value=""><br>
11    ※全角48文字まで入力可能<br>
12</div>
13<br>
14 
15●のし<input type="checkbox" onClick="a3.display=(this.checked?'':'none')"></br>
16<div id="area3" style="display:none">
17    のしの種類<select><option>1</option><option>2</option><option>3</option><select><br>
18    ギフトメッセージ<input type="text" name="" value=""><br>
19    ※全角10文字まで入力可能<br>
20</div>
21 
22<script language="javascript">
23a1=document.getElementById('area1').style
24a2=document.getElementById('area2').style
25a3=document.getElementById('area3').style
26</script>

≪実働サンプル≫

名入れ(315円)

ギフト梱包(無料)

のし

コメントを残す