Javascript显示区切换

不使用jQuery，我想在open上显示一个div（single），然后单击一个image（plus）链接关闭“single”并打开另一个div（multi）。同时，图像“加号”将改变（减号）。单击“减号”图像将关闭“多”div，打开“单个”div，并将图像更改为“加号”

我在网上找到了一个例子，它让我走了一半，但我似乎不知道如何在打开时隐藏“multi”，然后在单击图像时隐藏“single”。“single”div切换正常，但我似乎无法将“multi”集成到我的代码中。我得到的图像显示在div中它不应该出现的地方，或者“multi”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>

#标题区、#内容区、#内容区、#内容区、#内容区、#内容区{
浮动：左；
宽度：510px；
背景色：#FFE694；
文本对齐：居中；
}
#titleTextImg{
浮动：左；
字体大小：1.2米；
字体大小：粗体；
保证金：5px；
}
#imageDivLink{
浮动：对；
}
#头部驱动{
背景色：#0037DB；
颜色：9EB6FF；
}
#contentDivImg，contentDivImg，contentDivImg1，contentDivImg1{
背景色：#FFE694；
文本对齐：居中；
}
#头部驱动{
浮动：对；
保证金：10px 10px 5px 5px；
}
功能切换5（显示HIDEDIV、开关IMGTAG）{
var ele=document.getElementById（showHideDiv）；
var imageEle=document.getElementById（switchImgTag）；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
imageEle.innerHTML=''；
}
否则{
ele.style.display=“块”；
imageEle.innerHTML=''；
}
}
单击以切换




单一的


多种

如果您可以在中看到您的代码，我做了很多更改

HTML:

CSS:

请尝试此代码

        var key = 0;
        function toggle() {
            if (key == 0) {
                document.getElementById('imageDivLink').innerHTML = "<img src="images/minus.png">";
                document.getElementById("contentDivImg").style.display = "none";
                document.getElementById("contentDivImg1").style.display = "block";
                key = 1;
            } else {
                document.getElementById('imageDivLink').innerHTML = "<img src="images/plus.png">";
                document.getElementById("contentDivImg").style.display = "block";
                document.getElementById("contentDivImg1").style.display = "none";
                key = 0;
            }
        }
<div id="headerDivImg">
<div id="titleTextImg">Click to toggle</div>
<a id="imageDivLink" href="javascript:toggle();"><img src="images/plus.png"></a>
</div>
<br />
<br />
<div id="contentDivImg" style="display: block;">single</div>
<br />
<div id="contentDivImg1" style="display: none;">multi</div>

var键=0；
函数切换（）{
如果（键==0）{
document.getElementById（'imageDivLink'）。innerHTML=“”；
document.getElementById（“contentDivImg”）.style.display=“无”；
document.getElementById（“contentDivImg1”）.style.display=“block”；
键=1；
}否则{
document.getElementById（'imageDivLink'）。innerHTML=“”；
document.getElementById（“contentDivImg”）.style.display=“block”；
document.getElementById（“contentDivImg1”）.style.display=“无”；
键=0；
}
}
单击以切换




单一的


多种

JSFiddle中的Copy:Works非常好-我不打算在这里说谢谢，但无论如何我会说的。非常感谢。然后检查我的答案是否正确，而不是说“谢谢！”voteup我的回答还不能投票，因为我在网站上的时间还不够长，但刚刚发现了滴答声。

//Toggle button
var btnToggle = document.getElementById('imageDivLink');

//Container one
var divSingle = document.getElementById('contentDivImg');

//Container two
var divMultip = document.getElementById('contentDivImg1');

// Toggle button click event handler.
btnToggle.onclick = function(e){
    //Check if open single
    var showSingle =  btnToggle.classList.contains('open');
    if (showSingle){
        divSingle.classList.add('open');
        btnToggle.classList.remove('open');
        divMultip.classList.remove('open');
    }else{
        divSingle.classList.remove('open');
        btnToggle.classList.add('open');
        divMultip.classList.add('open');
    }
};

#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;
}

#contentDivImg {    display: none;}
#contentDivImg.open {    display: block;}

#contentDivImg1 {    display: none;}
#contentDivImg1.open {    display: block;}

#imageDivLink img {
    float: right;
    margin: 10px 10px 5px 5px;
    content:url("http://blendme.in/psds/brankic1979/plus%20transparent%20.png"); 
}

#imageDivLink.open img {
    content:url("http://blendme.in/psds/brankic1979/minus%20transparent.png"); 
}

        var key = 0;
        function toggle() {
            if (key == 0) {
                document.getElementById('imageDivLink').innerHTML = "<img src="images/minus.png">";
                document.getElementById("contentDivImg").style.display = "none";
                document.getElementById("contentDivImg1").style.display = "block";
                key = 1;
            } else {
                document.getElementById('imageDivLink').innerHTML = "<img src="images/plus.png">";
                document.getElementById("contentDivImg").style.display = "block";
                document.getElementById("contentDivImg1").style.display = "none";
                key = 0;
            }
        }
<div id="headerDivImg">
<div id="titleTextImg">Click to toggle</div>
<a id="imageDivLink" href="javascript:toggle();"><img src="images/plus.png"></a>
</div>
<br />
<br />
<div id="contentDivImg" style="display: block;">single</div>
<br />
<div id="contentDivImg1" style="display: none;">multi</div>