Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!
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
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
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Here is a JS Fiddle demo.
HTML:
CSS:
JQUERY:
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>
CSS:
.hidden { display: none;}
JQUERY:
$('.myRadios').change(function() {
$('.myRadios').next('span').addClass('hidden');
$(this).next('span').removeClass('hidden');
});
In javascript
In jquery you have
<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";
}
In jquery you have
$("input[name$='nameOfRadioButton']").click(function() {
var val = $(this).val();
if(val)
$("#idOfDivToShow").show();
else
$("#idOfDivToShow").hide();
});
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?
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>
You don't need Javascript to do this you can do it with pure CSS
CSS
CSS
input[type=radio] {
display: block;
}
input[type=radio] + div {
display: none;
}
input[type=radio]:checked + div {
display: block;
}
<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>
Thanks Julian
Unfortunately it's not working if I put it in a web page:
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>
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>
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();
});
});
You can see the above in a working sample here
@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
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
Premium Content
You need an Expert Office subscription to comment.Start Free Trial