Stefan Motz

asked on 10/27/2015

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

Last Comment

Julian Hansen

8/22/2022 - Mon

SOLUTION

zephyr_hex (Megan)

10/27/2015

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

10/27/2015

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

10/27/2015

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

10/27/2015

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

10/27/2015

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

10/27/2015

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)

10/27/2015

@romsom - you would need to link jquery for my example to work.

ASKER CERTIFIED SOLUTION

Julian Hansen

10/27/2015

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

10/28/2015

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

10/28/2015

You are welcome.