自动排除类似于切换的选择器

Question

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 class="flex"> <span class="flag-icon-wrapper flex" 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 zm 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 ZM 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 class="flag-icon-wrapper flex" 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 ZM 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 ZM 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 class="flex"> <div id="pymntCup" class="is-hidden-initially"> <ul> <li>Pagos desde Cuba</li> </ul> </div> <div id="pymntUsd" class="is-hidden-initially"> <ul> <li>Payments from the World</li> </ul> </div> </div>

Answer 1

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 class="flex"> <span class="flag-icon-wrapper flex" 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 zm 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 ZM 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 class="flag-icon-wrapper flex" 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 ZM 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 ZM 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 class="flex"> <div id="pymntCup" class="is-hidden-initially"> <ul> <li>Pagos desde Cuba</li> </ul> </div> <div id="pymntUsd" class="is-hidden-initially"> <ul> <li>Payments from the World</li> </ul> </div> </div>

Answer 2

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

}