Jquery Show Hide Div on Radio Select

Question

I have the following radio buttons. On page load I want to hide all ordered lists. When I select radio with value age 40 i want to show list-group-1, when i select radio with value 50 I want to show list-group-2 and when I select radio with value 60 I want to display list-group-3. How can you do this with jquery?

<input type="radio" name="age" value="40">40
<input type="radio" name="age" value="50">50
<input type="radio" name="age" value="60">60



<ol class="list-group-1">
 <li class="line"></li>
<ol>

<ol class="list-group-2">
 <li class="line"></li>
</ol>

<ol class="list-group-3">
 <li class="line"></li>
</ol>

** EDIT **

Appreciate all the different solutions, but why wouldn't jquery toggle() method not work?

In the end this is what I used:

$(function() {
  $('*[class^="js-toggle-"]').hide();

  var myListRef = {'email':'email','tel':'tel','writing':'writing'}
  $('[name="contact"]').click(function() {
     var $this = $(this);
     $('.js-toggle-' + myListRef[$this.val()]).show();

     $.each( myListRef , function( key, value ) {
         if(value !== $this.val()) {
              $('.js-toggle-' + value).hide();
         }    
      });

  });

 $('#problem').change(function(){
    if($('#problem').val() == 'parcel') {
        $('.js-toggle-problem').show(); 
    } else {
        $('.js-toggle-problem').hide(); 
    } 
  });
});

Answer 1

$(function() {
   $('ol').hide();
    var myListRef = {'40':'1','50':'2','60':3}
   $('[name="age"]').click(function() {
         $('.list-group-' + myListRef[$(this).val()]).show();
   });
});

Answer 2

Maybe my solution is a bit longer bit it's easier to understand what's going on: http://jsfiddle.net/xrveLsc8/

CSS:

ol {
    display: none;
}

JS:

$(function() {
    $('input[name="age"]').click(function() {
        var lisGroup = null;

        switch (parseInt($(this).val())) {
            case 40:
                lisGroup = '.list-group-1';
                break;
            case 50:
                lisGroup = '.list-group-2';
                break;
            case 60:
                lisGroup = '.list-group-3';
                break;
        }

        $(lisGroup).show();
    });
});

Answer 3

Try this:

 $("ol[class^='list-group-']").hide(); //$(".list-group-1").hide(); //$(".list-group-2").hide(); //$(".list-group-3").hide(); $("input[type=radio]").click(function() { switch(this.value){ case '40': $(".list-group-1").show(); $(".list-group-2").hide(); $(".list-group-3").hide(); break; case '50': $(".list-group-1").hide(); $(".list-group-2").show(); $(".list-group-3").hide(); break; case '60': $(".list-group-1").hide(); $(".list-group-2").hide(); $(".list-group-3").show(); break; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="age" value="40">40 <input type="radio" name="age" value="50">50 <input type="radio" name="age" value="60">60 <ol class="list-group-1"> <li class="line">test 1</li> </ol> <ol class="list-group-2"> <li class="line">test 2</li> </ol> <ol class="list-group-3"> <li class="line">test 3</li> </ol> 

Note: You asked in your comment about the right syntax to select all <ol> elements in one jQuery. The right syntax is $("ol[class^='list-group-']").hide(); . I used it in my demo above and commented out the three equivalent lines.

Answer 4

Since the position of input and ol elements correspond to each other in your scenario, the easiest and simplest way is to use index() for input and use the same to locate the corresponding ol .

$('ol').hide(); // Hide all ol's initially
$('input:radio').click(function()
{
    $('ol').hide(); // Hides all ol's - remove if not needed
    $('ol').eq($(this).index()).show(); - finds the corresponding index of ol and shows it.
});

http://jsfiddle.net/f1sdptm4/1/

With this you may add as many input-radio button combos and never to have to revisit the script part.