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

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

●名入れ(315円)<input type="checkbox" onClick="a1.display=(this.checked?'':'none')"></br>
<div id="area1" style="display:none">
    名入れ名<input type="text" name="" value="">
</div>
<br>

●ギフト梱包(無料)<input type="checkbox" onClick="a2.display=(this.checked?'':'none')"></br>
<div id="area2" style="display:none">
    ギフトの種類<select><option>1</option><option>2</option><option>3</option><select><br>
    ギフトメッセージ<input type="text" name="" value=""><br>
    ※全角48文字まで入力可能<br>
</div>
<br>

●のし<input type="checkbox" onClick="a3.display=(this.checked?'':'none')"></br>
<div id="area3" style="display:none">
    のしの種類<select><option>1</option><option>2</option><option>3</option><select><br>
    ギフトメッセージ<input type="text" name="" value=""><br>
    ※全角10文字まで入力可能<br>
</div>

<script language="javascript">
a1=document.getElementById('area1').style
a2=document.getElementById('area2').style
a3=document.getElementById('area3').style
</script>

≪実働サンプル≫

名入れ(315円)

ギフト梱包(無料)

のし

コメントを残す