How to toggle a div based upon the radio type selection?

Question

Hi

I toggle a div using something like this -

<input type="radio" name="myRadio" value="myDiv_1" />MyDiv
<input type="radio" name="myRadio" value="myDiv_2" />MyDiv2
<input type="radio" name="myRadio" value="myDiv_3" />MyDiv3

<div id="myDiv_1"> 1 Some input fields, text </div>
<div id="myDiv_2"> 2 More input fields, text </div>
<div id="myDiv_3"> 3 More input fields, text </div> 

JAVASCRIPT

$('#myDiv_1').hide();
$('#myDiv_2').hide();
$('#myDiv_3').hide();

$('input[name="myRadio"]').change(function() {
  var selected_type = $(this).val();
  switch(selected_type) {
   case "myDiv_1":
    $('#myDiv_1').slideDown();
    //if others are visible just slideup
    $('#myDiv_2').slideUp(); 
    $('#myDiv_3').slideUp();
   break;

   case "myDiv_2": 
    $('#myDiv_2').slideDown();
    //if others are visible just slideup
    $('#myDiv_1').slideUp(); 
    $('#myDiv_3').slideUp();
   break;
   case "myDiv_3": 
    $('#myDiv_3').slideDown();
    //if others are visible just slideup
    $('#myDiv_2').slideUp(); 
    $('#myDiv_1').slideUp();
   break;
  }
 }
);

This works fine. My question is how I can improve it and make it more flexible as if I have to MORE divs I have to modify all cases of switch.

Also should enclose the switch functionality in a function and bind this function to events such as click and change (just to ensure that toggling works)??

Thanks for your help.

Answer 1

The following is based on the code you pasted here - before using, read below:

$("div").hide();
$("input[name='myRadio']").change(function(){
  $("div:not(#"+$(this).val()+")").slideUp();
  $("div#"+$(this).val()).slideDown();
});

Before Using...

I would suggest you add a class to each of the collapsable panels, maybe .panel. And then update the selectors to modify only div.panel instead of every div on the page.

Answer 2

This works, I just tested it.

<script type="text/javascript">
$(document).ready(function(){

    $('.MyDiv').hide();

    $('input[name="myRadio"]').change(function(){
     var selected = $(this).val();
     $('.MyDiv').slideUp();
     $('#'+selected).slideDown();
    });

});
</script>

The radio buttons should look like this, where the value is the id of the element that should be shown.

<form action="example.com" method="post">
    <input type="radio" name="myRadio" value="myDiv_1" />MyDiv<br />
    <input type="radio" name="myRadio" value="myDiv_2" />MyDiv2<br />
    <input type="radio" name="myRadio" value="myDiv_3" />MyDiv3<br />
    <input type="radio" name="myRadio" value="myDiv_4" />MyDiv4
</form>

And finally, the divs should look like this, all having the class MyDiv:

<div id="myDiv_1" class="MyDiv">Div number 1!</div>
<div id="myDiv_2" class="MyDiv">Div number 2!</div>
<div id="myDiv_3" class="MyDiv">Div number 3!</div>
<div id="myDiv_4" class="myDiv">Div number 4!</div>

Answer 3

Hi Bravery Onions, your solution doesn't work in IE 8-- actually has the opposite behavior. Use the "click" function instead of "change"

  $('.myDiv').hide(); 
    $('input[name="myRadio"]').click(function(){
        var selected = $(this).val();
       $('.myDiv').slideUp();
        $('#'+selected).slideDown();
    });