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:
JavaScript
x
18
18
1
function setCup(elementId) {
2
const element = document.getElementById('pymntCup');
3
4
if (element.style.display === "block") {
5
element.style.display = "none";
6
} else {
7
element.style.display = "block";
8
}
9
}
10
function setUsd(elementId) {
11
const element = document.getElementById('pymntUsd');
12
13
if (element.style.display === "block") {
14
element.style.display = "none";
15
} else {
16
element.style.display = "block";
17
}
18
}
JavaScript
1
16
16
1
.flag-icon-wrapper {
2
margin-right: 20px;
3
padding-top: 5px;
4
}
5
.flex {
6
display: flex;justify-content:space-evenly;
7
}
8
h3 {
9
text-align:center;
10
}
11
.is-shown-initially {
12
display: block;
13
}
14
.is-hidden-initially {
15
display: none;
16
}
JavaScript
1
23
23
1
<h3>Select a payment mode</h3>
2
<div class="flex">
3
<span class="flag-icon-wrapper flex" onClick='setCup()'>
4
<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">
5
<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>
6
</span>
7
<span class="flag-icon-wrapper flex" onClick='setUsd()'>
8
<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">
9
<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>
10
</span>
11
</div>
12
<div class="flex">
13
<div id="pymntCup" class="is-hidden-initially">
14
<ul>
15
<li>Pagos desde Cuba</li>
16
</ul>
17
</div>
18
<div id="pymntUsd" class="is-hidden-initially">
19
<ul>
20
<li>Payments from the World</li>
21
</ul>
22
</div>
23
</div>
Advertisement
Answer
You can set the other one to none
JavaScript
1
14
14
1
function setCup(elementId) {
2
const element = document.getElementById('pymntCup');
3
4
//Here you can set the other one to none
5
document.getElementById('pymntUsd').style.display = "none";
6
7
if (element.style.display === "block") {
8
element.style.display = "none";
9
} else {
10
element.style.display = "block";
11
}
12
13
}
14
Likewise here too
JavaScript
1
14
14
1
function setUsd(elementId) {
2
const element = document.getElementById('pymntUsd');
3
4
//Here you can set the other one to none
5
document.getElementById('pymntCup').style.display = "none";
6
7
if (element.style.display === "block") {
8
element.style.display = "none";
9
} else {
10
element.style.display = "block";
11
}
12
13
}
14