開閉スクリプトの基礎

開閉スクリプトの基礎

ソースコード

<script type="text/javascript">
    var ie=document.all ? 1 : 0;
    var ns6=document.getElementById&&!document.all ? 1 : 0;
    var opera=window.opera ? 1 : 0;
    function openchild(childObj, parentObj) {
        var child="";
        var parent="";
        var sw="<MTBlogURL>images/mk_minus.gif"; 
        var hd="<MTBlogURL>images/mk_plus.gif"; 
        if (ie || ns6 || opera) {
            child=ns6 ? document.getElementById(childObj).style : document.all(childObj).style;
            parent=ns6 ? document.getElementById(parentObj) : document.all(parentObj);
            if (child.display=="none") {
                child.display="block";
                parent.src=sw;
            } else {
                child.display="none";
                parent.src=hd;
            }
        }
    }
</script>
<img id="close_1" src="<MTBlogURL>images/mk_plus.gif" onclick="openchild('open_1', 'close_1')" alt="" />
<span class="parent" onclick="openchild('opene_1', 'close_1')">Aカテゴリー</span><br />
<div id="open_1" class="child" style="display:none;">
Aカテゴリーの内容
</div>
<img id="close_2" src="<MTBlogURL>images/mk_plus.gif" onclick="openchild('open_2', 'close_2')" alt="" />
<span class="parent" onclick="openchild('opene_2', 'close_2')">Bカテゴリー</span><br />
<div id="open_2" class="child" style="display:none;">
Bカテゴリーの内容
</div>

実行例

Aカテゴリー

Aカテゴリーの内容

Bカテゴリー

Bカテゴリーの内容