jquery radio button show / hide

Ive got 3 radio button.

*if Email button is clicked will only show the email 开发者_开发百科textbox

*if collection is clicked will only show the collection textbox and hide the other divs. how do i do that? the code below seems only show but not hide after change!

<input type="radio" name="d_method" class="c_email"/>Email   
<input name="d_method" type="radio" class="c_collection"/>Colletion 
<input name="d_method" type="radio" class="c_post"/>Post

and 3 hidden div with id:

<div id="c_email" style="display:none;">
  email textbox
</div>
<div id="c_collection" style="display:none;">
  collection textbox
</div>
<div id="c_post" style="display:none;">
  post textbox
</div>

and jquery:

$('.c_email').change(function() {
        $('#c_email').stop().fadeIn();
    }, function(){
        $('#c_email').stop().hide();
    })
    $('.c_collection').change(function() {
        $('#c_collection').stop().fadeIn();
    }, function(){
        $('#c_collection').stop().hide();
    })
    $('.c_post').change(function() {
        $('#c_post').stop().fadeIn();
    }, function(){
        $('#c_post').stop().hide();
    })

---

You could simply do

$(':radio').change(function() {
    var itemSelector = '#' + $(this).attr('class');
    $('div').stop().fadeOut(function() {
        $(itemSelector).fadeIn();
    });
});

This is all based upon your convention that the class name is the same as your id <div>