Show div based on radio button click

Question

I have infinite divs which has a radio button in it along with a div which is associated with it and the div will be hidden.The hidden div will be only be shown if that radio button is choosen and if another radio button is selected , it wil hide the current div which is shown and show the div associated with that particular radio button.

<div>
<input type="radio" name="infinte" value="1" />
</div>
<div id="1" style="display:none">im div of 1</div>

<div>
<input type="radio" name="infinte" value="2" />
</div>
<div id="2" style="display:none">im div of 2</div>

<div>
<input type="radio" name="infinte" value="3"/>
</div>
<div id="3" style="display:none">Im div of 3</div>
.
.
.

AND my jquery is

$('input[type="radio"]').click(function(){
    if ($(this).is(':checked'))
    {
      var value = $(this).val();
        $('#'+value).fadeIn();
    }
    else
    {
        var value = $(this).val();
        $('#'+value).fadeOut();
    }
  });

But here when i choose another radio button its not hiding the current div which is shown.Please help.I have done a demo on JS Fiddle

and please suggest a better way to acomplish this other than what I have tried

Answer 1

You have given the ID starting with a number, which is invalid naming convention. You need to have some text before the number. The values of class and id cannot begin with a number.

Also you have a syntax error in the fade! See the working code below:

 $('input[type="radio"]').click(function(){ if ($(this).is(':checked')) { var value = $(this).val(); $("#"+value).fadeIn(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div> <input type="radio" name="infinte" value="a1" /> </div> <div id="a1" style="display:none">im div of 1</div> <div> <input type="radio" name="infinte" value="a2" /> </div> <div id="a2" style="display:none">im div of 2</div> <div> <input type="radio" name="infinte" value="a3"/> </div> <div id="a3" style="display:none">Im div of 3</div> 

Answer 2

You forgot the parentheses after fadeIn:

$("#"+value).fadeIn();

http://jsfiddle.net/gw8ty4py/1/

Edit: Just realised you also need the other divs to hide. Try this:

<div>
<input type="radio" name="infinte" value="1" />
</div>
<div class="toggleDiv" id="1" style="display:none">im div of 1</div>

<div>
<input type="radio" name="infinte" value="2" />
</div>
<div class="toggleDiv" id="2" style="display:none">im div of 2</div>

<div>
<input type="radio" name="infinte" value="3"/>
</div>
<div class="toggleDiv" id="3" style="display:none">Im div of 3</div>

---

var toggleDivs = $(".toggleDiv");
$('input[type="radio"]').change(function(){
    toggleDivs.fadeOut();
    if ($(this).is(':checked'))
    {
      var value = $(this).val();

        $("#"+value).fadeIn();
    }
  });

Working fiddle: http://jsfiddle.net/gw8ty4py/8/

Answer 3

Try this: JSFiddle

Changue

$('#'+value).fadeIn();

for

$("#"+value).show("fadeIn");

Answer 4

Try this,

 var current=null;
  $('input[type="radio"]').click(function(){
 if ($(this).is(':checked'))
 {
   if(current!=null)
    $("#"+current).hide();           
    var value = $(this).val();
   current=value; 
  $("#"+value).fadeIn();
 }
});

EXAMPLE FIDDLE

Answer 5

You may try this :

<input type="radio" name="infinte" value="1" />

<div id="1" style="display:none">im div of 1</div>


<input type="radio" name="infinte" value="2" />

<div id="2" style="display:none">im div of 2</div>


<input type="radio" name="infinte" value="3"/>

<div id="3" style="display:none">Im div of 3</div>

Adn JS:

$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
  var value = $(this).val();
    $('#'+value).fadeIn();
     $('div').not('#'+value).fadeOut();
}

});

DEMO FIDDLE

Answer 6

There is a zero-JavaScript version that is dead simple and works in all major browsers . It takes advantage of the :checked pseudo-class and the adjacency selector . It works with an arbitrary number of radio buttons / divs. It is perfectly applicable to your situation, because you have each div listed after each radio button.

An advantage to this over the other solutions that have been posted is that it will work even when a user has Javascript disabled (in this case, other solutions will simply not show the content, making the feature impossible to use). Some users browse the web with Javascript disabled, for security reasons or to improve load time on very slow internet (like people who live away from urban centers and can only get internet by satellite).

 div { display: none; } input[type="radio"] { display: block; } input[type="radio"]:checked + div { display: block; } 

 <input type="radio" name="infinte" value="1" /> <div>im div of 1</div> <input type="radio" name="infinte" value="2" /> <div>im div of 2</div> <input type="radio" name="infinte" value="3"/> <div>Im div of 3</div> 

here is the live demo

The example I've provided assumes that the div immediately follows the radio button in the markup, but some variant of sibling/child selectors can be used to select it no matter where it is, as long as it is either a sibling or child (direct or indirect) of the radio button.

If you still want to have the "fade" effect that jQuery offers you, you can achieve it with this technique by changing opacity rather than display type, and apply the transition property. Here is an example of that.