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
romsomIT DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

zephyr_hex (Megan)DeveloperCommented:
Here is a JS Fiddle demo.

HTML:

<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>

Open in new window


CSS:

.hidden { display: none;}

Open in new window


JQUERY:

$('.myRadios').change(function() {
    $('.myRadios').next('span').addClass('hidden');
    $(this).next('span').removeClass('hidden');
});

Open in new window

Najam UddinCommented:
In javascript

<input type="radio" name="data" onclick="showDiv()" id="rad1"> Option 1
<input type="radio" name="data" onclick="hideDiv()" id="rad2"> Option 2

function showDiv() {
    document.getElementById('divtohide').style.display = "none";
}
function hideDiv() {
    document.getElementById('divtohide').style.display = "block";
}

Open in new window



In jquery you have 

$("input[name$='nameOfRadioButton']").click(function() {
        var val = $(this).val();
          if(val)
          $("#idOfDivToShow").show();
         else
           $("#idOfDivToShow").hide();
    });

Open in new window

romsomIT DeveloperAuthor Commented:
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

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Get Your eBook
romsomIT DeveloperAuthor Commented:
Najam uddin, how can I display this in an html web page on my computer? Do I need a link to Jquery?
Julian HansenCommented:
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.
romsomIT DeveloperAuthor Commented:
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)DeveloperCommented:
@romsom - you would need to link jquery for my example to work.
Julian HansenCommented:
Unfortunately it's not working if I put it in a web page:
Works for me (http://www.marcorpsa.com/ee/t1188a.html

In what way is it not working for you?

NB: This solution is presented as one of many. My rule of coding in html is always leave scripting for last - in other words - accomplish what you can with HTML, then move to CSS and finally if you are not able to achieve the required result explore a scripting option. There is a tendency to use JavaScript / JQuery for everything when in many cases CSS will do the job and often much better than script.

That is not necessarily the case in this situation - and depends entirely on your markup. For instance if you choose to wrap your <input type="radio"> in a div that will take it down a different branch of the DOM than the DIV you are trying to target - leaving you with no choice but to use JavaScript to achieve the desired result.

In a few of the JavaScript solutions on this page .next() has been used to select the target <div>. .next() is interchangeable with the CSS + operator and so if you are considering using JQuery with .next() you should really rather use CSS, Another advantage of the CSS solution in this instance is that there is no need to do anything specific to hide in-active elements - they hide automatically as the default style is display:none - this only gets overridden when the preceding element is checked - as soon as its checked status changes the default style is imposed and the element is hidden. A JQuery solution requires you to explicitly hide the visible element - either directly or by means of adding / removing a class.

Here is an example using JQuery on markup where the input does not immediately precede the content it should display.

Consider the following markup
<div class="form-group">
  <label for="radio1">Option 1</label>
  <input type="radio" id="radio1" name="radio1" class="togglme" value="1" data-target="panel1"/>
</div>
<div id="panel1" class="toggleme">Toggle me div 1</div>
<div class="form-group">
  <label for="radio2">Option 2</label>
  <input type="radio" id="radio2" name="radio1" class="togglme" value="2" data-target="panel2"/>
</div>
<div id="panel2" class="toggleme">Toggle me div 2</div>
<div class="form-group">
  <label for="radio3">Option 3</label>
  <input type="radio" id="radio3" name="radio1" class="togglme" value="3" data-target="panel3"/>
</div>
<div id="panel3" class="toggleme">Toggle me div 3</div>

Open in new window

The <input>'s cannot access the target div's through a .next() operation - either a direct targeting through id is required or traversing up the DOM to a common parent.
CSS will not work in this situation.

In the above markup you will notice the <input> has a custom data attribute data-target. This makes the markup a bit more wordy but it does make it easier to target the right <div> when the input is clicked. The JQuery in this case would be as follows
$(function() {
  $(':radio').click(function(e) {
    // Hide the visibile div's
    $('.toggleme').hide();
    // Show the selected one by using the
    // target's id obtained from the custom
    // data attribute of the clicked input
    $('#' + $(this).data('target')).show();
  });
});

Open in new window


You can see the above in a working sample here

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
romsomIT DeveloperAuthor Commented:
@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
Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.