Avatar of Stefan Motz
Stefan Motz
Flag for United States of America asked on

JavaScript show/hide by selecting radio button

Hi Experts,
I would need your help with providing me with a JavaScript code.
I would like to have three radio buttons on the page, the content below them depending on which one is selected.
E.g. when button1 is selected, I would like to see the text "Content One" below it.
When button2 is selected, I would like to see the text "Content Two" displayed below it.

I would appreciate your help
JavaScript

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
SOLUTION
zephyr_hex (Megan)

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
SOLUTION
Najam Uddin

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Stefan Motz

ASKER
Thanks for your quick response.
Zephyr_hex, I tried to put it in a web page, but unfortunately it doesn't display the text when I click the radio buttons. Am I missing something?
<html>
<head>
<script type="text/javascript">
<!--
$('.myRadios').change(function() {
    $('.myRadios').next('span').addClass('hidden');
    $(this).next('span').removeClass('hidden');
});
//-->
</script>

<style type="text/css">
.hidden { display: none;}
</style>

</head>

<body>

<input type="radio" class="myRadios" value="1" name="myRadio">Radio 1
    <span class="hidden"> This is Radio 1!</span>
<input type="radio" class="myRadios" value="2" name="myRadio">Radio 2
    <span class="hidden"> This is Radio 2!</span>
<input type="radio" class="myRadios" value="3" name="myRadio">Radio 3
    <span class="hidden"> This is Radio 3!</span>

</body>
</html>

Open in new window

Stefan Motz

ASKER
Najam uddin, how can I display this in an html web page on my computer? Do I need a link to Jquery?
Julian Hansen

You don't need Javascript to do this you can do it with pure CSS
CSS
input[type=radio] {
  display: block;
}
input[type=radio] + div {
  display: none;
}
input[type=radio]:checked + div {
  display: block;
}

Open in new window

HTML
<input type="radio" id="radio1" name="radio1" class="togglme" value="1"/>
<div>Toggle me div 1</div>
<input type="radio" id="radio2" name="radio1" class="togglme" value="2"/>
<div>Toggle me div 2</div>
<input type="radio" id="radio3" name="radio1" class="togglme" value="3"/>
<div>Toggle me div 3</div>

Open in new window

Working sample here.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Stefan Motz

ASKER
Thanks Julian
Unfortunately it's not working if I put it in a web page:
<html>
<head>

<style type="text/css">
input[type=radio] {
  display: block;
}
input[type=radio] + div {
  display: none;
}
input[type=radio]:checked + div {
  display: block;
}
</style>

</head>

<body>

<input type="radio" id="radio1" name="radio1" class="togglme" value="1"/>
<div>Toggle me div 1</div>
<input type="radio" id="radio2" name="radio1" class="togglme" value="2"/>
<div>Toggle me div 2</div>
<input type="radio" id="radio3" name="radio1" class="togglme" value="3"/>
<div>Toggle me div 3</div>

</body>
</html>

Open in new window

zephyr_hex (Megan)

@romsom - you would need to link jquery for my example to work.
ASKER CERTIFIED SOLUTION
Julian Hansen

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Stefan Motz

ASKER
@Julian
I copied the source code of your web page and it's working fine now. I'm not sure why it wasn't working for me for the first time.

@zephyr_hex & Najam uddin
My problem was that I didn't know how to link Jquery. Julian's source code contained the link, so it was easy to customize my example.


Thank you very much all of you
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Julian Hansen

You are welcome.