javaスクリプトで「よくある質問」ページを作成したいのですが・・・

セブンイレブンの「よくある質問ページ」のような、
＜http://www.sej.co.jp/support/faq/products.html＞
------------------
最初は文字だけ表示されていて、
クリックすると質問の回答が直下に表示され、
自由に表示・非表示できる
------------------
といったページを作成したいと思います。

javaスクリプトを使っているのだろうなということは分かるのですが、
具体的にどの関数を使うのかが分からず、
サンプル集を見ても似たようなものが見つからず、
調べ方も分からず途方にくれています。
※htmlで作成しようとしています

ご存知の方がいらっしゃいましたらご回答頂けますでしょうか。
よろしくお願い致します。

No.1 回答者： fujillin 回答日時： 2009/08/18 18:08

サンプルがあればよいのであれば…

ご提示のサイトのものがそのままサンプルになりませんか？
ご提示のサイトではfaq.jsという外部ファイルが展開表示部分を主に行っているスクリプトと思われます。
コメントも入っているので、比較的わかりやすいかと思います。
（ほとんどそのまま利用しようと思えばできちゃうかも…）

ライブラリとしてjqueryを使用してますが、主に利用しているのはセレクタとしての機能みたいなので、ライブラリ不要なように書き換えるなどしてみるのもよろしいかと…

この回答へのお礼

ご回答ありがとうございます。
確かに・・・外部ファイルの場所を間違えていて見れないと勘違いしていました。
申し訳ありません、ありがとうございました。

お礼日時：2009/08/21 13:23

No.2 ベストアンサー 回答者： gaku1 回答日時： 2009/08/20 04:16

<div>

<span onclick="func1(this)">Question</span>
<br>
<span style="display:none">
Answer
<br>
<span onclick="func2(this)">Close</span>
</span>
</div>
<script type="text/javascript">
function func1(x){
x.parentNode.getElementsByTagName("span").item(1).style.display="block";
}
function func2(x){
x.parentNode.style.display="none";
}
</script>

　やりかたはいろいろあると思いますが、ごく単純なものを例示しました（飾りはいっさい省いてあります）。これだけで動きます。divとspanを使っていますが、使い分けは「表示／非表示」そのものとは無関係なので、ページのレイアウトに合わせて決めればよいです。<div>～</div>は何個あっても、QuestionとAnswerのところが変わるだけで、他は同じです。
　この例では、HTMLの構造と関数の処理内容が不可分に結びついている点に注意してください。（span要素にid属性をつけて、それを利用すれば、HTMLの構造はかなり自由にすることができます。当然、関数も変わります。）

この回答へのお礼

ご回答ありがとうございます。
javaスクリプトを直接触ったことがなかったので、この例はとても助かります！！！＞＜
HTML構造の説明までありがとうございます。
これを元に、色々装飾して作成したいと思います。
本当にありがとうございました！！

お礼日時：2009/08/21 13:25