javascript - Javascript 表示領域の切り替え

Question

jQueryを使用せずに、開いたときにdiv（シングル）を表示し、画像（プラス）リンクをクリックして「シングル」を閉じ、別のdiv（マルチ）を開きたい。同時に「プラス」というイメージが（マイナスに）変化することです。「マイナス」画像をクリックすると、「マルチ」div が閉じ、「シングル」div が開き、画像が「プラス」に変更されます。

ウェブ上で途中まで行った例を見つけましたが、開いたときに「マルチ」を非表示にし、画像クリックで「シングル」を非表示にする方法がわかりません。「単一」の div は問題なくトグルしますが、「マルチ」をコードに統合できないようです。私は、意図されていないdivに画像が表示されるようにするか、「マルチ」divがトグルしません。

<style type="text/css">
#headerDivImg, #contentDivImg, #contentDivImg_, #contentDivImg1, #contentDivImg1_ {
    float: left;
    width: 510px;
    background-color: #FFE694;
    text-align: center;
}
#titleTextImg {
    float: left;
    font-size: 1.2em;
    font-weight: bold;
    margin: 5px;
}
#imageDivLink {
    float: right;
}
#headerDivImg {
    background-color: #0037DB;
    color: #9EB6FF;
}
#contentDivImg, #contentDivImg_, contentDivImg1, #contentDivImg1_ {
    background-color: #FFE694;
    text-align: center;
}
#headerDivImg img {
    float: right;
    margin: 10px 10px 5px 5px;
}
</style>

<script type="text/javascript">
function toggle5(showHideDiv, switchImgTag) {
    var ele = document.getElementById(showHideDiv);
    var imageEle = document.getElementById(switchImgTag);
    if(ele.style.display == "block") {
        ele.style.display = "none";
        imageEle.innerHTML = '<img src="images/minus.png">';
    }
    else {
        ele.style.display = "block";
        imageEle.innerHTML = '<img src="images/plus.png">';
    }
}
</script>

<div id="headerDivImg">
    <div id="titleTextImg">Click to toggle</div>
    <a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'contentDivImg1', 'imageDivLink');"><img src="images/plus.png"></a>
</div>
<br />
<br />
<div id="contentDivImg" style="display: block;">single</div>
<br />
<div id="contentDivImg1" style="display: block;">multi</div>