オンクリックでの文の表示非表示の仕方について

オンクリックで文の表示非表示ができ、なおかつ文が表示された際に
下の文などに重ならず、スペースが追加されるようにするにはどうすればよろしでしょうか（同一ページ内でです）？下記はその例です。
よろしくお願い致します。
http://seo.fc2.com/link/manual.html
http://www3.nhk.or.jp/news/t10014037651000.html（左ニュース部分）

No.1 ベストアンサー 回答者： yambejp 回答日時： 2008/04/17 14:38

いろいろやり方はあると思いますが

こんな風にしてみてはいかがですか？
<style>
div.hyouji {
display:block;
}
div.hihyouji {
display:none;
}
</style>
<script>
window.onload=function(){
var tags=document.getElementsByTagName("div");
for(var i=0;i<tags.length;i++){
if(tags[i].className=="title"){
tags[i].onclick=function(){
var obj=this;
while(obj=obj.nextSibling){
if(obj.nodeName=="DIV") obj.className=obj.className!="hihyouji"?"hihyouji":"hyouji";
}
}
}
}
}
</script>
<div>
<div class="title">タイトル1</div>
<div class="hihyouji">内容1</div>
</div>
<div>
<div class="title">タイトル2</div>
<div class="hihyouji">内容2</div>
</div>
<div>
<div class="title">タイトル3</div>
<div class="hihyouji">内容3</div>
</div>

この回答へのお礼

お答え頂きありがとうございます。
まさに思っていた通りの表示です！大変勉強になりました。
ありがとうございました。

お礼日時：2008/04/17 15:18