How to make this work with show all/none button?

The simple solution is to remove the if-statements from your showAll() function, and always list all displays as block 

  function showall(){

    var D1 = document.getElementById("myPopupD1");
    var D2 = document.getElementById("myPopupD2");
    var D1M = document.getElementById("D1moreinfo");
    var D2M = document.getElementById("D2moreinfo");
    D1.classList.toggle("show");
    D2.classList.toggle("show");

    D1M.style.display="block";
    D2M.style.display="block";  
    }

In addition, you can make a hideAll() function to hide all the displays. You can toggle a show/hide button along the way to change what function is being called.


the problem is that when you "showAll" you toggle the "show" class, regardless of the current state the element is in. So the first thing you should do is check what behaviour is desired, if there are any elements not shown, you want to show all elements, if all elements are shown, you want to hide the elements. See below. 

function popupD1() {
    var popup = document.getElementById("myPopupD1");
    popup.classList.toggle("show");
    var image = document.getElementById("arrow1");
                    
    if (image.getAttribute('src') == "arrow.png") {
        image.src = "arrowL.png";
    } else {
        image.src = "arrow.png";
    }
    				
    var D1S = document.getElementById("D1S");
    if (D1S.textContent == "Show info"){
        D1S.textContent = "Hide info";
    } else {
        D1S.textContent="Show info";
    }
}

function D1moreinfo() {
    var hide = document.getElementById("D1moreinfo");
    if (hide.style.display ==="block"){
        hide.style.display = "none";
    } else {
        hide.style.display = "block";
    }
    
    var image =  document.getElementById("arrowL1");
    if (image.getAttribute('src') == "arrowL.png") {
        image.src = "arrow.png";
    } else {
        image.src = "arrowL.png";
    }
}
    
function popupD2() {
    var popup = document.getElementById("myPopupD2");
    popup.classList.toggle("show");
    var image = document.getElementById("arrow1");
    if (image.getAttribute('src') == "arrow.png") {
        image.src = "arrowL.png";
    } else {
        image.src = "arrow.png";
    }
    				
    var D1S=document.getElementById("D2S");
    if (D1S.textContent == "Show info") {
        D1S.textContent = "Hide info";
    } else {
        D1S.textContent = "Show info";
    }
}
    
function D2moreinfo(){
    var hide=document.getElementById("D2moreinfo");
    if (hide.style.display ==="block"){
        hide.style.display="none";
    } else {
        hide.style.display="block";
    }
    	
    var image = document.getElementById("arrowL1");
    if (image.getAttribute('src') == "arrowL.png") {
        image.src = "arrow.png";
    } else {
        image.src = "arrowL.png";
    }
}
    
function showall() {
    var D1 = document.getElementById("myPopupD1");
    var D2 = document.getElementById("myPopupD2");
    var D1M = document.getElementById("D1moreinfo");
    var D2M = document.getElementById("D2moreinfo");
    // First we check if all elements are showing
    var allShowing = (D1.classList.contains("show") && 
                    D2.classList.contains("show"));
    // Then we allways hide the elements
    D1.classList.remove("show");
    D2.classList.remove("show");
    // If any element was hidden, we show all of them
    if (!allShowing) {
        D1.classList.add("show");
        D2.classList.add("show");
    }
    
    if (D1M.style.display === "block") {
        D1M.style.display = "none";
    } else {
        D1M.style.display = "block";
    }

    if (D2M.style.display ==="block") {
        D2M.style.display="none";
    } else {
        D2M.style.display="block";
    }
}
    
.D1 {  
    border: 1px solid;
    border-color: red;
    width: 450px;
    height: 220px;
    margin-top: 10px;
}

#D1button {
    border: none;
    overflow: hidden;
    background-color: transparent;
    display: block;
    position: absolute;
    left: 390px;
    top: 175px;
    color: red;
}

.popupD1 {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.popupD1 .popuptextD1 {
    visibility: hidden;
    width: 250px;
    height: 210px;
    color: red;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    left: 370px;
    position: absolute;
    z-index: 0;
    top: 20px;
    background-color: gray;
    margin-left: 100px;
}

.popupD1 .popuptextD1:hover {
    transition: 1.5s;
    background-image: url(BF4B9.jpg);
    color: red;
}

.popupD1 .show {
    visibility: visible;
    -webkit-animation: fadeIn;
    animation: fadeIn 1s;
}

#D1moreinfo {
    background-color: transparent;
    border-radius: 6px;
    width: 200px;
    height: relative;
    display: none;
    position: absolute;
    top: -5px;
    left: 255px;
}
  
.D2 {  
    border: 1px solid;
    border-color: red;
    width: 450px;
    height: 220px;
    margin-top: 10px;
}

#D2button {
    border: none;
    overflow: hidden;
    background-color: transparent;
    display: block;
    position: absolute;
    left: 390px;
    top: 290px;
    color: red;
}

.popupD2 {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.popupD2 .popuptextD2 {
    visibility: hidden;
    width: 250px;
    height: 210px;
    color: red;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    left: 370px;
    position: absolute;
    z-index: 0;
    top: 20px;
    background-color: gray;
    margin-left: 100px;
}

.popupD2 .popuptextD2:hover {
    transition: 1.5s;
    background-image: url(BF4B9.jpg);
    color: red;
}

.popupD2 .show {
    visibility: visible;
    -webkit-animation: fadeIn;
    animation: fadeIn 1s;
}

#D2moreinfo {
    background-color: transparent;
    border-radius: 6px;
    width: 200px;
    height: relative;
    display: none;
    position: absolute;
    top: -5px;
    left: 255px;
}

.showall {
    overflow: hidden;
    background-color: transparent;
    position: absolute;
    top: -4px;
    left: 335px;
    position: fixed;
    border-radius: 10px;
}
<div class="D1">
    <div class="popupD1">
        <span class="popuptextD1" id="myPopupD1">
             *A long text that I'm not gonna paste here*
            <br/>
            <button id="morebutton1" onclick="D1moreinfo()">
                <img id="arrowL1" src="arrow.png"/>
            </button>
            <div id="D1moreinfo">
                <ul>
                    <li>XY</li>
                    <li>XY</li>
                    <li>XY</li>
                    <li>XY</li>
                    <li>XY</li>
                    <li>XY</li>
                    <li>XY</li>
                    <li>XY</li>
                </ul>
            </div>
        </span>
    </div>
    <img id="D1K" src="XY.png"/>
    <button id="D1button" onclick="popupD1()">
        <img id="arrow1" src="arrow.png"/>
        <br/>
        <span id="D1S">Show info</span>
    </button>
</div>

<div class="D2">
    <div class="popupD2">
        <span class="popuptextD2" id="myPopupD2">
            *A long text that I'm not gonna paste here*<br>
            <button id="morebutton1" onclick="D2moreinfo()">
                <img id="arrowL1" src="arrow.png"/>
            </button>
            <div id="D2moreinfo">
                <ul>
                    <li>XY</li>
                    <li>XY</li>
                    <li>XY</li>
                    <li>XY</li>
                    <li>XY</li>
                    <li>XY</li>
                    <li>XY</li>
                    <li>XY</li>
                </ul>
            </div>
        </span>
    </div>
    <img id="D2K" src="XY.png"/>
    <button id="D2button" onclick="popupD2()">
        <img id="arrow1" src="arrow.png"/>
        <br/>
        <span id="D2S">Show info</span>
    </button>
</div>

<div class="showall">
    <button onclick="showall()" title="Hide/show all">
        <span id="show">Show all</span>
    </button>
</div>

Tags:

Javascript

Html

Css

Recent Posts