- ベストアンサー
オンクリックでの文の表示非表示の仕方について
オンクリックで文の表示非表示ができ、なおかつ文が表示された際に 下の文などに重ならず、スペースが追加されるようにするにはどうすればよろしでしょうか(同一ページ内でです)?下記はその例です。 よろしくお願い致します。 http://seo.fc2.com/link/manual.html http://www3.nhk.or.jp/news/t10014037651000.html(左ニュース部分)
- みんなの回答 (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>
お礼
お答え頂きありがとうございます。 まさに思っていた通りの表示です!大変勉強になりました。 ありがとうございました。