質問タイトルをクリックすると回答が表示されるホームページの仕組みを教えてください

質問

ホームページで「よくある質問」ページを作っています（php）。
ページの上部に、質問文を1から10まで順に並べておき、その質問文をクリックすると、回答文が表示されるようにしたいです。
やり方を教えていただけないでしょうか？
<a name>タグで、ページの下へジャンプさせるのではなく、隠していた回答文が質問文をクリックすることにより表示させたいです。

例；

１．質問(1)
２．質問(2)
３．質問(3)
１０．質問(10)

（質問(1)をクリック）↓
１．質問(1)
　┏━━━━━━━━━┓
　┃回答文回答文回答文┃
　┗━━━━━━━━━┛
２．質問(2)
３．質問(3)
１０．質問(10)

よろしくお願いします。

回答No.2

SortaNerd · ベストアンサー

JavaScriptを使ってstyleのdisplayを操作するのがよいと思います。

サンプル :
<span onclick="answer('1')">１．質問(1)</span><br>
<div id="1" style="display:none">
┏━━━━━━━━━┓<br>
┃回答文回答文回答文┃<br>
┗━━━━━━━━━┛<br>
</div>

<script language="JavaScript">
function answer(id){
if(document.getElementById(id).style.display!="none"){
document.getElementById(id).style.display="none";
}
else
document.getElementById(id).style.display="";
}
</script>

お礼

SortaNerdさんへ
こんにちは。回答をありがとうございます。
ご丁寧なスクリプトを紹介してくださったおかげで、無事に反映させることができました！ありがとうございます！

回答No.1

noname#100277

手段としては「javascript onclick」で実行だが、javascriptを切ってるブラウザの人の事を考えると使わないのが確実。