折りたたみ式JavaScriptをcheckbox等で操作したいのですが。

質問

下記サイトの「Read more」をクリックすると
折りたたみ式で「続き」の内容が表示される機能がありますが
http://artifact-jp.com/

普通の入力フォームページ（HTML）で、
同じ様なことをしなくてはならず大変困っております。
checkbox、radiobuttonをクリックして
同じことが出来ますでしょうか？
（表示したい内容は入力フォームです）
検索では大量にHITしますがこのパターンを見つけられませんでした

■radiobuttonを選択すると、
表示出来る方法。

■checkboxのチェックを外すと、
表示出来る方法。（ページを開いた際は続きが非表示でチェックはchecked）

※出来れば、表示するHTML（内容）を読み込むのではなく
同HTML内に記述しておきたいのですが
それは難しいでしょうか？

サンプルJavaScriptを提示せず、難しい質問で恐縮ですが
シンプルなソースを教えて頂けないでしょうか。
よろしくお願いします(>_<)

イメージはこんな感じです。
******************************************************
（checkboxの場合）
□続きが表示されます（チェックを外すと表示）
　　　　　↓
あいうえおかきくけこさしすせそなにぬねの
あいうえおかきくけこさしすせそなにぬねの
あいうえおかきくけこさしすせそなにぬねの
******************************************************
（radiobuttonの場合）
●続きが表示されます　○続きを表示しない
　　　　　↓
あいうえおかきくけこさしすせそなにぬねの
あいうえおかきくけこさしすせそなにぬねの
あいうえおかきくけこさしすせそなにぬねの
******************************************************

回答No.1

yambejp · ベストアンサー

こんな感じでどうでしょう？

<input type="checkbox" onClick="a1.display=(this.checked?'':'none')">続きが表示されます</br>
<div id="area1" style="display:none">
あいうえおかきくけこさしすせそなにぬねの<br>
あいうえおかきくけこさしすせそなにぬねの<br>
あいうえおかきくけこさしすせそなにぬねの<br>
</div>
<hr>
<input type="radio" name="r1" onClick="a2.display=''">続きが表示されます
<input type="radio" name="r1" checked onClick="a2.display='none'">続きを表示しない<br>
<div id="area2" style="display:none">
あいうえおかきくけこさしすせそなにぬねの<br>
あいうえおかきくけこさしすせそなにぬねの<br>
あいうえおかきくけこさしすせそなにぬねの<br>
</div>
<script language="javascript">
a1=document.getElementById('area1').style
a2=document.getElementById('area2').style
</script>

お礼

yambejpさんありがとうございます！！

シンプルでわかりやすいソースですネ！
自分は凄い複雑なソースをイメージしていたので、正直驚きました。
今試して見たら問題なく動作してます。

恐縮ですが、また何かありましたらお力添えをお願いします。
yambejpさん本当にありがとうございました(>_<)