Link to home
Start Free TrialLog in
Avatar of Stefan Motz
Stefan MotzFlag 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
SOLUTION
Avatar of zephyr_hex (Megan)
zephyr_hex (Megan)
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of 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

Najam uddin, how can I display this in an html web page on my computer? Do I need a link to Jquery?
Avatar of 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.
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

@romsom - you would need to link jquery for my example to work.
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
@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
You are welcome.