Toggle DIV with checked radio button
I am trying to switch DIV
according to the selection radio buttons
. This is my coding.
<div class="form-element-row">
<div class="first-child">
<label for="name">Registration Period :</label>
</div>
<div class="last-child">
<input type="radio" name="period" value="1" />1 Year
<input type="radio" name="period" value="2" />2 Years
<input type="radio" name="period" value="3" />3 Years
</div>
</div>
<div class="subscription_rate">
<div class="first-child">
<label> </label>
</div>
<div class="last-child">
<table>
<tr>
<th>Subscription Rate</th>
<th>1 Year</th>
<th>2 Years</th>
<th>3 Years</th>
</tr>
<tr>
<td>Rates for subscription period.</td>
<td>$ 3000</td>
<td>$ 4500</td>
<td>$ 7500</td>
</tr>
</table>
</div>
</div>
This is jquery
$('.subscription_rate').hide(); // hide the div first
$('input[type=radio]').click(function(){
if($('input[type=radio]:checked')){
$('.subscription_rate') .slideToggle('slow') // show it when user clicks the radio buttons
}else{
$('.subscription_rate') .fadeOut("slow"); // if in any case radio button is not checked by user hide the div
}
});
This works for me, but I have a problem. Here I only need to switch to the selected one radio button
. With this code, it works for every button. This means I just want to select the next radio button and then toggle the DIV. I need to do this, I always select the radio button, I need to toggle DIV
.
Can someone tell me how I can do this .. Thanks.
source to share
var i = 0;
$('.subscription_rate').hide(); // hide the div first
$('input[type=radio]').click(function(){
if(i==0) {
$(this).addClass("active");
$(".subscription_rate").slideDown();
i++;
}
else {
if($(this).hasClass("active")) {
$(".subscription_rate").slideToggle();
}
else {
$(".active").removeClass("active");
$(this).addClass("active");
$(".subscription_rate").show().fadeOut().fadeIn();
}
}
});
You can add the class 'active' and next time if the user clicks on it it will detect if it has class 'active' or not.
source to share
This code will perform the required functionality.
$('.subscription_rate').hide();
$('input[type=radio]').click(function(){
if($('input[type=radio]:checked') && $(this).attr('value')==1){
if(!($('.subscription_rate').is(':visible'))){
$('.subscription_rate').slideToggle('slow')
}
}else if($('input[type=radio]:checked') && $(this).attr('value')==2){
$('.subscription_rate') .fadeOut("slow");
}
else if(!($('.subscription_rate').is(':visible'))){
$('.subscription_rate').slideToggle('slow');
}
});
Radio button 1 and 3 will always make the div visible and 2 will always hide the div.
source to share
It should be a simple solution, if tested, slide it up, otherwise disappear. So if you change it with code, it should have the same effect (radio buttons cannot "deselect all" by clicking a button only through code.
$('.subscription_rate').hide(); // hide the div first
$('input[type=radio]').change(function () {
if ($(this).is(':checked')) {
$('.subscription_rate').slideDown("slow");
} else {
$('.subscription_rate').fadeOut('slow');
}
});
EDIT:
Here is a fiddle with a working example: http://jsfiddle.net/AVgzW/ - note that this is slideDown
not toggleDown - and you can use slideUp
this as desired - doc: http://api.jquery.com/category/effects/
EDIT2:
1 If it is already selected and you click on it, it shows / hides the div / text in toggle mode.
2 If not already selected (select new option) it hides it (text div)
3 Initial selection of ANY does not display text, but after selecting it and pressing again.
$('.subscription_rate').hide(); // hide the div first
$('input[type=radio]').change(function () {
if ($(this).is(':checked') && $(this).hasClass("activeSelection")) {
$('.subscription_rate').slideToggle("slow");
} else {
$('input[type=radio]').removeClass("activeSelection");
$(this).addClass('activeSelection');
$('.subscription_rate').fadeOut('slow');
}
});
Environment for this: http://jsfiddle.net/AVgzW/1/
source to share
I think you want each radio button to show each item separately? If this code works and you can check it on fiddle
I've added classes to individual elements to control them separately:
<tr>
<th>Subscription Rate</th>
<th class="toggle 1yr">1 Year</th>
<th class="toggle 2yr">2 Years</th>
<th class="toggle 3yr">3 Years</th>
</tr>
This js will only show items related to the radio button you selected.
$('.subscription_rate').hide(); // hide the div first
$('input[type=radio]').click(function () {
$('.subscription_rate').show();
$('.toggle').hide(); // if in any case radio button is not checked by user hide the div
$('.' + $(this).val() + 'yr').show();
});
I would recommend not using table elements if you want them to look nice and have fancy transitions.
source to share
im not sure if this is what you are looking for, but this might help:
$(document).ready(function (){
$('.subscription_rate').hide(); // hide the div first
$('input[type=radio]').click(function(){
if($('input[type=radio]:checked')){
$('.subscription_rate') .show('slow') // show it when user clicks the radio buttons
}else{
$('.subscription_rate') .fadeOut("slow"); // if in any case radio button is not checked by user hide the div
}
});})
source to share