After conducting thorough research, I discovered a variety of solutions using jQuery and Vanilla. While one answer perfectly addressed my issue, it failed to integrate effectively with the rest of my code. So, I decided to modify the code from this Stack Overflow post Show / Hide Div on Click with JavaScript which worked well. However, there's a small catch... when I select an option, it displays as intended. But what I really need is for only one option to be visible at a time – meaning that selecting a new option should hide the previously selected one. Here's the adapted code snippet:
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 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...