<!-- 回答部分のの開閉(子ノードのクラス名を入替) -->
<style type="text/css">
dl#faqList dt {
font-weight:bold;
}
dl#faqList dd.openclose {
margin:10px 10px 20px 20px;
display:block;
}
dl#faqList dd.close {
margin:10px 10px 20px 20px;
display:none;
}
</style>
<form action="#">
<input type="button" onclick="fTglAnswer()" id="btnOpenClose" value="回答を閉じる" />
</form>
<dl id="faqList">
<dt>質問1</dt>
<dd class="open">回答1</dd>
<dt>質問2</dt>
<dd class="open">回答2</dd>
</dl>
<script type="text/javascript">
function fTglAnswer(){
/* 親ノードを格納 */
var parenObj=document.getElementById("faqList");
/* ボタンオブジェクトを格納 */
var btnObj=document.getElementById("btnOpenClose");
for(var i in parenObj.childNodes){
/* 子ノードを格納 */
var childObj=parenObj.childNodes[i];
if(childObj.tagName=="DD"){
/* クラス名取得 */
if(childObj.className=="open"){
/* クラス名設定 */
childObj.className="close";
btnObj.value="回答を開く";
}else{
childObj.className="open";
btnObj.value="回答を閉じる";
}
}
}
}
</script>