How can I stop other functions from interfering with a click event?How do I detect a click outside an element?How can I upload files asynchronously?How can I merge properties of two JavaScript objects dynamically?How do I remove a property from a JavaScript object?How can I convert a string to boolean in JavaScript?How can I know which radio button is selected via jQuery?How can I get query string values in JavaScript?How can I refresh a page with jQuery?How do I remove a particular element from an array in JavaScript?How do I return the response from an asynchronous call?
Why would an invisible personal shield be necessary?
Was Donald Trump at ground zero helping out on 9-11?
How can Paypal know my card is being used in another account?
How do I say "this is why…"?
Why is this photograph shot with Delta 400 and developed with D76 1+1 so grainy
What would the United Kingdom's "optimal" Brexit deal look like?
Road bike front wheel question
Is it unprofessional to mention your cover letter and resume are best viewed in Chrome?
Can Papyrus be folded?
90s/2000s TV show : man uses government time machine to fix national problems
What force enables us to walk? Friction or normal reaction?
If the Moon were impacted by a suitably sized meteor, how long would it take to impact the Earth?
How do you deal with characters with multiple races?
Efficiently finding furthest two nodes in a graph
Just how much information should you share with a former client?
When encrypting twice with two separate keys, can a single key decrypt both steps?
Unknown indication below upper stave
What is a Trio Word™?
Embedded C - Most elegant way to insert a delay
What are the cons of stateless password generators?
Should I put my name first, or last in the team members list
What is the source of this clause, often used to mark the completion of something?
Did Vladimir Lenin have a cat?
Is it bad style if the personal first person narrator of a story dies during said story?
How can I stop other functions from interfering with a click event?
How do I detect a click outside an element?How can I upload files asynchronously?How can I merge properties of two JavaScript objects dynamically?How do I remove a property from a JavaScript object?How can I convert a string to boolean in JavaScript?How can I know which radio button is selected via jQuery?How can I get query string values in JavaScript?How can I refresh a page with jQuery?How do I remove a particular element from an array in JavaScript?How do I return the response from an asynchronous call?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
0
I am trying to make three separate pieces of content appear on the basis of a click event. This works, however if the user clicks more than one button in sequence, both pieces of content appear at once.
My knowledge of JS is limited. I know that another 'else' condition might help me but when I add it, the whole function stops working.
I want only one content option to be visible at one time. Is there a way I can add an additional condition in my function declaration to do this? Thank you for any help.
.container-top
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
.tab
border: 2px solid #DCDCDC;
background-color: #fff;
padding: 1rem;
width: 33%;
text-align: center;
text-transform: uppercase;
<div class="container-top">
<button onclick="productDrop()" class="tab" >
<span class="tab-title">Product description</span>
</button>
<button onclick="financeDrop()" class="tab" id="finance">
<span class="tab-title">Interest-free finance</span>
</button>
<button onclick="deliveryDrop()"class="tab" id="delivery">
<span class="tab-button">Delivery and returns</span>
</button>
</div>
<div id="productBody">
Product
</div>
<div id="financeBody">
Finance
</div>
<div id="deliveryBody">
Delivery
</div>
<script>
function productDrop()
var x = document.getElementById("productBody");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
function financeDrop()
var x = document.getElementById("financeBody");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
function deliveryDrop()
var x = document.getElementById("deliveryBody");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
</script>javascript
asked Mar 26 at 21:04
hypothesiahypothesia
54 bronze badges
add a comment |
0
I am trying to make three separate pieces of content appear on the basis of a click event. This works, however if the user clicks more than one button in sequence, both pieces of content appear at once.
My knowledge of JS is limited. I know that another 'else' condition might help me but when I add it, the whole function stops working.
I want only one content option to be visible at one time. Is there a way I can add an additional condition in my function declaration to do this? Thank you for any help.
.container-top
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
.tab
border: 2px solid #DCDCDC;
background-color: #fff;
padding: 1rem;
width: 33%;
text-align: center;
text-transform: uppercase;
<div class="container-top">
<button onclick="productDrop()" class="tab" >
<span class="tab-title">Product description</span>
</button>
<button onclick="financeDrop()" class="tab" id="finance">
<span class="tab-title">Interest-free finance</span>
</button>
<button onclick="deliveryDrop()"class="tab" id="delivery">
<span class="tab-button">Delivery and returns</span>
</button>
</div>
<div id="productBody">
Product
</div>
<div id="financeBody">
Finance
</div>
<div id="deliveryBody">
Delivery
</div>
<script>
function productDrop()
var x = document.getElementById("productBody");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
function financeDrop()
var x = document.getElementById("financeBody");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
function deliveryDrop()
var x = document.getElementById("deliveryBody");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
</script>javascript
asked Mar 26 at 21:04
hypothesiahypothesia
54 bronze badges
What do you expect to happen instead when more than one button is clicked?
– Felix Kling
Mar 26 at 21:07
There are a lot of ways you could implement this, but a common way to add "radio button" functionality (that is, you only want one thing at a time) is to always hide everything when you initially click (even if some things are already hidden), and then show the one item you do want.
– romellem
Mar 26 at 21:08
add a comment |
0
0
0
I am trying to make three separate pieces of content appear on the basis of a click event. This works, however if the user clicks more than one button in sequence, both pieces of content appear at once.
My knowledge of JS is limited. I know that another 'else' condition might help me but when I add it, the whole function stops working.
I want only one content option to be visible at one time. Is there a way I can add an additional condition in my function declaration to do this? Thank you for any help.
.container-top
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
.tab
border: 2px solid #DCDCDC;
background-color: #fff;
padding: 1rem;
width: 33%;
text-align: center;
text-transform: uppercase;
<div class="container-top">
<button onclick="productDrop()" class="tab" >
<span class="tab-title">Product description</span>
</button>
<button onclick="financeDrop()" class="tab" id="finance">
<span class="tab-title">Interest-free finance</span>
</button>
<button onclick="deliveryDrop()"class="tab" id="delivery">
<span class="tab-button">Delivery and returns</span>
</button>
</div>
<div id="productBody">
Product
</div>
<div id="financeBody">
Finance
</div>
<div id="deliveryBody">
Delivery
</div>
<script>
function productDrop()
var x = document.getElementById("productBody");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
function financeDrop()
var x = document.getElementById("financeBody");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
function deliveryDrop()
var x = document.getElementById("deliveryBody");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
</script>javascript
asked Mar 26 at 21:04
hypothesiahypothesia
54 bronze badges
I am trying to make three separate pieces of content appear on the basis of a click event. This works, however if the user clicks more than one button in sequence, both pieces of content appear at once.
My knowledge of JS is limited. I know that another 'else' condition might help me but when I add it, the whole function stops working.
I want only one content option to be visible at one time. Is there a way I can add an additional condition in my function declaration to do this? Thank you for any help.
.container-top
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
.tab
border: 2px solid #DCDCDC;
background-color: #fff;
padding: 1rem;
width: 33%;
text-align: center;
text-transform: uppercase;
<div class="container-top">
<button onclick="productDrop()" class="tab" >
<span class="tab-title">Product description</span>
</button>
<button onclick="financeDrop()" class="tab" id="finance">
<span class="tab-title">Interest-free finance</span>
</button>
<button onclick="deliveryDrop()"class="tab" id="delivery">
<span class="tab-button">Delivery and returns</span>
</button>
</div>
<div id="productBody">
Product
</div>
<div id="financeBody">
Finance
</div>
<div id="deliveryBody">
Delivery
</div>
<script>
function productDrop()
var x = document.getElementById("productBody");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
function financeDrop()
var x = document.getElementById("financeBody");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
function deliveryDrop()
var x = document.getElementById("deliveryBody");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
</script>.container-top
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
.tab
border: 2px solid #DCDCDC;
background-color: #fff;
padding: 1rem;
width: 33%;
text-align: center;
text-transform: uppercase;
<div class="container-top">
<button onclick="productDrop()" class="tab" >
<span class="tab-title">Product description</span>
</button>
<button onclick="financeDrop()" class="tab" id="finance">
<span class="tab-title">Interest-free finance</span>
</button>
<button onclick="deliveryDrop()"class="tab" id="delivery">
<span class="tab-button">Delivery and returns</span>
</button>
</div>
<div id="productBody">
Product
</div>
<div id="financeBody">
Finance
</div>
<div id="deliveryBody">
Delivery
</div>
<script>
function productDrop()
var x = document.getElementById("productBody");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
function financeDrop()
var x = document.getElementById("financeBody");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
function deliveryDrop()
var x = document.getElementById("deliveryBody");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
</script>.container-top
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
.tab
border: 2px solid #DCDCDC;
background-color: #fff;
padding: 1rem;
width: 33%;
text-align: center;
text-transform: uppercase;
<div class="container-top">
<button onclick="productDrop()" class="tab" >
<span class="tab-title">Product description</span>
</button>
<button onclick="financeDrop()" class="tab" id="finance">
<span class="tab-title">Interest-free finance</span>
</button>
<button onclick="deliveryDrop()"class="tab" id="delivery">
<span class="tab-button">Delivery and returns</span>
</button>
</div>
<div id="productBody">
Product
</div>
<div id="financeBody">
Finance
</div>
<div id="deliveryBody">
Delivery
</div>
<script>
function productDrop()
var x = document.getElementById("productBody");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
function financeDrop()
var x = document.getElementById("financeBody");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
function deliveryDrop()
var x = document.getElementById("deliveryBody");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
</script>javascript
javascript
asked Mar 26 at 21:04
hypothesiahypothesia
54 bronze badges
asked Mar 26 at 21:04
hypothesiahypothesia
54 bronze badges
asked Mar 26 at 21:04
hypothesiahypothesia
54 bronze badges
asked Mar 26 at 21:04
hypothesiahypothesia
54 bronze badges
asked Mar 26 at 21:04
hypothesiahypothesia
54 bronze badges
54 bronze badges
What do you expect to happen instead when more than one button is clicked?
– Felix Kling
Mar 26 at 21:07
There are a lot of ways you could implement this, but a common way to add "radio button" functionality (that is, you only want one thing at a time) is to always hide everything when you initially click (even if some things are already hidden), and then show the one item you do want.
– romellem
Mar 26 at 21:08
add a comment |
What do you expect to happen instead when more than one button is clicked?
– Felix Kling
Mar 26 at 21:07
There are a lot of ways you could implement this, but a common way to add "radio button" functionality (that is, you only want one thing at a time) is to always hide everything when you initially click (even if some things are already hidden), and then show the one item you do want.
– romellem
Mar 26 at 21:08
What do you expect to happen instead when more than one button is clicked?
– Felix Kling
Mar 26 at 21:07
What do you expect to happen instead when more than one button is clicked?
– Felix Kling
Mar 26 at 21:07
There are a lot of ways you could implement this, but a common way to add "radio button" functionality (that is, you only want one thing at a time) is to always hide everything when you initially click (even if some things are already hidden), and then show the one item you do want.
– romellem
Mar 26 at 21:08
There are a lot of ways you could implement this, but a common way to add "radio button" functionality (that is, you only want one thing at a time) is to always hide everything when you initially click (even if some things are already hidden), and then show the one item you do want.
– romellem
Mar 26 at 21:08
add a comment |
1 Answer
1
active
oldest
votes
1
You're overthinking it. Let's consolidate and accomplish the same goal:
const blah = document.getElementById('displayArea');
blah.innerHTML = 'Product'; // First Default.
drop = (id) =>
blah.innerHTML = id;
.container-top
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
.tab
border: 2px solid #DCDCDC;
background-color: #fff;
padding: 1rem;
width: 33%;
text-align: center;
text-transform: uppercase;
<div class="container-top">
<button onclick="drop('Product')" class="tab" autofocus>
<span class="tab-title">Product description</span>
</button>
<button onclick="drop('Finance')" class="tab">
<span class="tab-title">Interest-free finance</span>
</button>
<button onclick="drop('Delivery')"class="tab">
<span class="tab-button">Delivery and returns</span>
</button>
</div>
<h1 id="displayArea"></h1>edited Mar 26 at 22:23
Cody Gray♦
199k37 gold badges401 silver badges484 bronze badges
answered Mar 26 at 21:25
Chris W.Chris W.
16.6k2 gold badges36 silver badges73 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55366165%2fhow-can-i-stop-other-functions-from-interfering-with-a-click-event%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You're overthinking it. Let's consolidate and accomplish the same goal:
const blah = document.getElementById('displayArea');
blah.innerHTML = 'Product'; // First Default.
drop = (id) =>
blah.innerHTML = id;
.container-top
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
.tab
border: 2px solid #DCDCDC;
background-color: #fff;
padding: 1rem;
width: 33%;
text-align: center;
text-transform: uppercase;
<div class="container-top">
<button onclick="drop('Product')" class="tab" autofocus>
<span class="tab-title">Product description</span>
</button>
<button onclick="drop('Finance')" class="tab">
<span class="tab-title">Interest-free finance</span>
</button>
<button onclick="drop('Delivery')"class="tab">
<span class="tab-button">Delivery and returns</span>
</button>
</div>
<h1 id="displayArea"></h1>edited Mar 26 at 22:23
Cody Gray♦
199k37 gold badges401 silver badges484 bronze badges
answered Mar 26 at 21:25
Chris W.Chris W.
16.6k2 gold badges36 silver badges73 bronze badges
add a comment |
1
You're overthinking it. Let's consolidate and accomplish the same goal:
const blah = document.getElementById('displayArea');
blah.innerHTML = 'Product'; // First Default.
drop = (id) =>
blah.innerHTML = id;
.container-top
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
.tab
border: 2px solid #DCDCDC;
background-color: #fff;
padding: 1rem;
width: 33%;
text-align: center;
text-transform: uppercase;
<div class="container-top">
<button onclick="drop('Product')" class="tab" autofocus>
<span class="tab-title">Product description</span>
</button>
<button onclick="drop('Finance')" class="tab">
<span class="tab-title">Interest-free finance</span>
</button>
<button onclick="drop('Delivery')"class="tab">
<span class="tab-button">Delivery and returns</span>
</button>
</div>
<h1 id="displayArea"></h1>edited Mar 26 at 22:23
Cody Gray♦
199k37 gold badges401 silver badges484 bronze badges
answered Mar 26 at 21:25
Chris W.Chris W.
16.6k2 gold badges36 silver badges73 bronze badges
add a comment |
1
1
1
You're overthinking it. Let's consolidate and accomplish the same goal:
const blah = document.getElementById('displayArea');
blah.innerHTML = 'Product'; // First Default.
drop = (id) =>
blah.innerHTML = id;
.container-top
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
.tab
border: 2px solid #DCDCDC;
background-color: #fff;
padding: 1rem;
width: 33%;
text-align: center;
text-transform: uppercase;
<div class="container-top">
<button onclick="drop('Product')" class="tab" autofocus>
<span class="tab-title">Product description</span>
</button>
<button onclick="drop('Finance')" class="tab">
<span class="tab-title">Interest-free finance</span>
</button>
<button onclick="drop('Delivery')"class="tab">
<span class="tab-button">Delivery and returns</span>
</button>
</div>
<h1 id="displayArea"></h1>edited Mar 26 at 22:23
Cody Gray♦
199k37 gold badges401 silver badges484 bronze badges
answered Mar 26 at 21:25
Chris W.Chris W.
16.6k2 gold badges36 silver badges73 bronze badges
You're overthinking it. Let's consolidate and accomplish the same goal:
const blah = document.getElementById('displayArea');
blah.innerHTML = 'Product'; // First Default.
drop = (id) =>
blah.innerHTML = id;
.container-top
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
.tab
border: 2px solid #DCDCDC;
background-color: #fff;
padding: 1rem;
width: 33%;
text-align: center;
text-transform: uppercase;
<div class="container-top">
<button onclick="drop('Product')" class="tab" autofocus>
<span class="tab-title">Product description</span>
</button>
<button onclick="drop('Finance')" class="tab">
<span class="tab-title">Interest-free finance</span>
</button>
<button onclick="drop('Delivery')"class="tab">
<span class="tab-button">Delivery and returns</span>
</button>
</div>
<h1 id="displayArea"></h1>const blah = document.getElementById('displayArea');
blah.innerHTML = 'Product'; // First Default.
drop = (id) =>
blah.innerHTML = id;
.container-top
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
.tab
border: 2px solid #DCDCDC;
background-color: #fff;
padding: 1rem;
width: 33%;
text-align: center;
text-transform: uppercase;
<div class="container-top">
<button onclick="drop('Product')" class="tab" autofocus>
<span class="tab-title">Product description</span>
</button>
<button onclick="drop('Finance')" class="tab">
<span class="tab-title">Interest-free finance</span>
</button>
<button onclick="drop('Delivery')"class="tab">
<span class="tab-button">Delivery and returns</span>
</button>
</div>
<h1 id="displayArea"></h1>const blah = document.getElementById('displayArea');
blah.innerHTML = 'Product'; // First Default.
drop = (id) =>
blah.innerHTML = id;
.container-top
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
.tab
border: 2px solid #DCDCDC;
background-color: #fff;
padding: 1rem;
width: 33%;
text-align: center;
text-transform: uppercase;
<div class="container-top">
<button onclick="drop('Product')" class="tab" autofocus>
<span class="tab-title">Product description</span>
</button>
<button onclick="drop('Finance')" class="tab">
<span class="tab-title">Interest-free finance</span>
</button>
<button onclick="drop('Delivery')"class="tab">
<span class="tab-button">Delivery and returns</span>
</button>
</div>
<h1 id="displayArea"></h1>edited Mar 26 at 22:23
Cody Gray♦
199k37 gold badges401 silver badges484 bronze badges
answered Mar 26 at 21:25
Chris W.Chris W.
16.6k2 gold badges36 silver badges73 bronze badges
edited Mar 26 at 22:23
Cody Gray♦
199k37 gold badges401 silver badges484 bronze badges
edited Mar 26 at 22:23
Cody Gray♦
199k37 gold badges401 silver badges484 bronze badges
edited Mar 26 at 22:23
Cody Gray♦
199k37 gold badges401 silver badges484 bronze badges
199k37 gold badges401 silver badges484 bronze badges
answered Mar 26 at 21:25
Chris W.Chris W.
16.6k2 gold badges36 silver badges73 bronze badges
answered Mar 26 at 21:25
Chris W.Chris W.
16.6k2 gold badges36 silver badges73 bronze badges
answered Mar 26 at 21:25
Chris W.Chris W.
16.6k2 gold badges36 silver badges73 bronze badges
16.6k2 gold badges36 silver badges73 bronze badges
add a comment |
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55366165%2fhow-can-i-stop-other-functions-from-interfering-with-a-click-event%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What do you expect to happen instead when more than one button is clicked?
– Felix Kling
Mar 26 at 21:07
There are a lot of ways you could implement this, but a common way to add "radio button" functionality (that is, you only want one thing at a time) is to always hide everything when you initially click (even if some things are already hidden), and then show the one item you do want.
– romellem
Mar 26 at 21:08