PHP & JavaScript Room :: 設置サンプル

質問1

回答1

質問2

回答2

<!-- 回答部分のの開閉（子ノードのクラス名を入替） -->
<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>