onClickで真下に詳細を表示したい。

[新着] Webテンプレートを仮オープンしました

0   名前： シクロ ： 2006/10/13（金） 19:27  ID:boGCbQfQ

下記のサイトのようにリンクをクリックしたら、
その詳細内容がすぐ下に表示されるようにしたいのです。
この場合どのように記述すればいいでしょうか？

よろしくお願いします。

http://www.kanebo-cosmetics.co.jp/cosmeticsqanda/cosmeticsadvice/
1   名前： NullPo ： 2006/10/13（金） 19:27  ID:Z0FHbpib
昔似たような質問が何回かでましたね。
検索すればもっといいのが見つかると思いますが、参考までに。
<div id="caption" onclick="document.getElementById('menu').style.display='block';">ここをクリックすると内容を表示します。</div>
<div id="menu" style="display:none;">内容</div>

<div id="caption1" onclick="document.getElementById('menu1').style.display='block';">ここをクリックすると内容1を表示します。</div>
<div id="menu1" style="display:none;">内容1</div>

2   名前： シクロ ： 2006/10/13（金） 19:27  ID:boGCbQfQ
ありがとうございます。やってみます。

>昔似たような質問が何回かでましたね。
微妙に検索してみたんですけど、分からなかったので。。探してみます。
3   名前： シクロ ： 2006/10/13（金） 19:27  ID:boGCbQfQ
すみません。以下のソース＋
もう一度クリックすると、元に戻すにはどうすればいいですか？

<div id="caption" onclick="document.getElementById('menu').style.display='block';">ここをクリックすると内容を表示します。</div>
<div id="menu" style="display:none;">内容</div>

<div id="caption1" onclick="document.getElementById('menu1').style.display='block';">ここをクリックすると内容1を表示します。</div>
<div id="menu1" style="display:none;">内容1</div>

よろしくお願いします。
4   名前： NullPo ： 2006/10/13（金） 19:27  ID:Z0FHbpib
>>3
document.getElementById('menu').style.display = 'none';
で元に戻るはずです。
5   名前： 匿名 ： 2006/10/13（金） 19:27  ID:L0mFLTIe
ちょっと余計な口を挟むと、style="display: none"を埋め込むのは良くない。
JavaScriptなんて何かの拍子に動作しなくなるんだから、その場合に二進も三進も行かなくなる。

初期化関数を作って、そこでstyle.display = 'none'を与えること。
それができないなら、初期状態は全項目が表示されている方がずっとマシ。
6   名前： 匿名 ： 2006/10/13（金） 19:27  ID:L0mFLTIe
ごめん、>>5は舌足らずだったのでフォローしとくと、
考え方は全く>>1の通り。この最小のサンプルで動作原理を理解しよう。

ただ、これを実際にWebサイトに応用するには、改良すべき点がいろいろあるわけだよね。
もちろん、ユーザビリティを気にしだすとキリがないからやれる範囲でいいと思うけど
少なくとも、style="display:none"を埋め込まないようにすることだけは、対処した方がいい。

で、実際にどうするかだけど…
http://www.tohoho-web.com/how2/tec2.htm#treeMenu
を参考にしてみらどうだろう。個人的にはdiv要素の羅列は気持ち悪いのだけど（苦笑
一覧へ戻る