• ベストアンサー

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

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

質問者が選んだベストアンサー

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

いろいろやり方はあると思いますが こんな風にしてみてはいかがですか? <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>

fukawa
質問者

お礼

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

関連するQ&A