Auto excluding selector resembling a toggle-CodePudding

I've being searching around and found some jQuery and Vanilla answers. I even found the exact answer to my problem, but it did not work within the rest of my code. So I have come with this adapted code which I took from this question Show / Hide Div on Click with JavaScript and it works fine but...as far as it is when I choose and option it appears, fine, but I would like that if I select the other option, then the previous turns hidden. What I mean, I need only one of the options displayed at once. This is my code:

function setCup(elementId) {
    const element = document.getElementById('pymntCup');

    if (element.style.display === "block") {
        element.style.display = "none";
    } else {
        element.style.display = "block";
    }
    }
    function setUsd(elementId) {
    const element = document.getElementById('pymntUsd');

    if (element.style.display === "block") {
        element.style.display = "none";
    } else {
        element.style.display = "block";
    }
    }

.flag-icon-wrapper {
    margin-right: 20px;
    padding-top: 5px;
    }
    .flex {
    display: flex;justify-content:space-evenly;
    }
    h3 {
    text-align:center;
    }
    .is-shown-initially {
    display: block;
    }
    .is-hidden-initially {
    display: none;
    }

<h3>Select a payment mode</h3>
    <div >
    <span  onClick='setCup()'>
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" width="50" height="22">
    <path d="m 40,3 v 7 h 3.3 q 3.4,0 3.4,-3 0,-3 -3.4,-4 z m 3.2,-3 q 3.3,0 5.1,2 1.7,2 1.7,5 0,3 -1.7,4 -1.7,2 -5,2 H 40 v 8 H 36.6 V 0 Z M 17.9,0 h 3.4 v 13 q 0,3 1,4 0.9,2 3,2 2,0 3,-1 1,-2 1,-5 V 0 h 3.3 v 13 q 0,5 -1.9,7 -1.8,2 -5.3,2 -3.6,0 -5.5,-2 -2,-2 -2,-7 z M 15.4,2 13.6,5 13.3,4 Q 11.4,3 9.3,3 6.5,3 4.9,5 3.4,7 3.4,11 q 0,8 5.9,8 2,0 3.8,-2 h 0.3 l 2,2 -0.5,1 Q 12.4,22 9.1,22 4.9,22 2.5,19 0,16 0,11 0,6 2.5,3 4.9,0 9.1,0 q 3.1,0 5.8,2 z" style="fill:#007aff;"/></svg>
    </span>
    <span  onClick='setUsd()'>
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" width="50" height="22">
    <path  d="m 37.2,3 v 15 h 2.5 q 3.7,0 5.3,-1 1.6,-2 1.6,-6 Q 46.6,7 45,5 43.4,3 39.7,3 Z m 2.2,-3 q 5.4,0 8,3 2.6,2 2.6,8 0,5 -2.6,8 -2.6,3 -8,3 H 33.8 V 0 Z M 24.6,3 q -1.4,0 -2.1,1 -0.8,1 -0.8,2 0,1 0.4,2 0.5,0 1.8,1 h 1.6 q 2.7,1 3.9,2 1.2,2 1.2,5 0,3 -1.9,4 -1.9,2 -5.2,2 -1.3,0 -2.8,-1 -1.5,0 -2.7,-1 l 2.3,-3 q 1.5,2 3.3,2 1.7,0 2.6,-1 1,-1 1,-2 0,-2 -0.5,-2 -0.6,-1 -1.9,-1 L 23.2,12 Q 18.3,11 18.3,6 18.3,4 20,2 21.8,0 24.6,0 v 0 q 3,0 5.2,3 L 27.6,5 Q 27.4,5 27.2,5 27,4 26.1,4 25.4,3 24.6,3 Z M 0,0 h 3.4 v 13 q 0,3 0.9,5 0.9,1 3.2,1 2,0 3,-1 1.1,-2 1.1,-5 V 0 h 3.3 v 14 q 0,4 -1.9,6 -1.9,2 -5.5,2 Q 3.9,22 1.9,20 0,18 0,14 Z" style="fill:#007aff;"/></svg>
    </span>
    </div>
    <div >
    <div id="pymntCup" >
    <ul>
        <li>Pagos desde Cuba</li>
    </ul>
    </div>
    <div id="pymntUsd" >
    <ul>
        <li>Payments from the World</li>
    </ul>
    </div>
    </div>

CodePudding user response：

You can set the other one to none

function setCup(elementId) {
const element = document.getElementById('pymntCup');

//Here you can set the other one to none 
document.getElementById('pymntUsd').style.display = "none";

if (element.style.display === "block") {
    element.style.display = "none";
} else {
    element.style.display = "block";
}

}

Likewise here too

function setUsd(elementId) {
const element = document.getElementById('pymntUsd');

//Here you can set the other one to none 
document.getElementById('pymntCup').style.display = "none";

if (element.style.display === "block") {
    element.style.display = "none";
} else {
    element.style.display = "block";
}

}

CodePudding user response：

You have logic errors in code that hides items. Fixed code:

let cupElement, usdElement;

window.onload = () => {
  cupElement = document.getElementById('pymntCup');
  usdElement = document.getElementById('pymntUsd');
}

function setCup() {
  cupElement.style.display = cupElement.style.display === "block" ? "none" : "block";
  usdElement.style.display = "none";
}

function setUsd() {
  cupElement.style.display = "none";
  usdElement.style.display = usdElement.style.display === "block" ? "none" : "block";
}

.flag-icon-wrapper {
    margin-right: 20px;
    padding-top: 5px;
    }
    .flex {
    display: flex;justify-content:space-evenly;
    }
    h3 {
    text-align:center;
    }
    .is-shown-initially {
    display: block;
    }
    .is-hidden-initially {
    display: none;
    }

<h3>Select a payment mode</h3>
    <div >
    <span  onClick='setCup()'>
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" width="50" height="22">
    <path d="m 40,3 v 7 h 3.3 q 3.4,0 3.4,-3 0,-3 -3.4,-4 z m 3.2,-3 q 3.3,0 5.1,2 1.7,2 1.7,5 0,3 -1.7,4 -1.7,2 -5,2 H 40 v 8 H 36.6 V 0 Z M 17.9,0 h 3.4 v 13 q 0,3 1,4 0.9,2 3,2 2,0 3,-1 1,-2 1,-5 V 0 h 3.3 v 13 q 0,5 -1.9,7 -1.8,2 -5.3,2 -3.6,0 -5.5,-2 -2,-2 -2,-7 z M 15.4,2 13.6,5 13.3,4 Q 11.4,3 9.3,3 6.5,3 4.9,5 3.4,7 3.4,11 q 0,8 5.9,8 2,0 3.8,-2 h 0.3 l 2,2 -0.5,1 Q 12.4,22 9.1,22 4.9,22 2.5,19 0,16 0,11 0,6 2.5,3 4.9,0 9.1,0 q 3.1,0 5.8,2 z" style="fill:#007aff;"/></svg>
    </span>
    <span  onClick='setUsd()'>
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" width="50" height="22">
    <path  d="m 37.2,3 v 15 h 2.5 q 3.7,0 5.3,-1 1.6,-2 1.6,-6 Q 46.6,7 45,5 43.4,3 39.7,3 Z m 2.2,-3 q 5.4,0 8,3 2.6,2 2.6,8 0,5 -2.6,8 -2.6,3 -8,3 H 33.8 V 0 Z M 24.6,3 q -1.4,0 -2.1,1 -0.8,1 -0.8,2 0,1 0.4,2 0.5,0 1.8,1 h 1.6 q 2.7,1 3.9,2 1.2,2 1.2,5 0,3 -1.9,4 -1.9,2 -5.2,2 -1.3,0 -2.8,-1 -1.5,0 -2.7,-1 l 2.3,-3 q 1.5,2 3.3,2 1.7,0 2.6,-1 1,-1 1,-2 0,-2 -0.5,-2 -0.6,-1 -1.9,-1 L 23.2,12 Q 18.3,11 18.3,6 18.3,4 20,2 21.8,0 24.6,0 v 0 q 3,0 5.2,3 L 27.6,5 Q 27.4,5 27.2,5 27,4 26.1,4 25.4,3 24.6,3 Z M 0,0 h 3.4 v 13 q 0,3 0.9,5 0.9,1 3.2,1 2,0 3,-1 1.1,-2 1.1,-5 V 0 h 3.3 v 14 q 0,4 -1.9,6 -1.9,2 -5.5,2 Q 3.9,22 1.9,20 0,18 0,14 Z" style="fill:#007aff;"/></svg>
    </span>
    </div>
    <div >
    <div id="pymntCup" >
    <ul>
        <li>Pagos desde Cuba</li>
    </ul>
    </div>
    <div id="pymntUsd" >
    <ul>
        <li>Payments from the World</li>
    </ul>
    </div>
    </div>