Hide to Show some information jQuery using Radio Button - php

Question

I want to show different information based on radio buttons using jQuery.
When I select any payment processor then I want to show related payment method information on the right side.
So, when I select any button then show the information related to that payment processor, and at the same time hide information related to the other payment processors.
This is my HTML Form:
<form class="form-horizontal" action="<?php base_url(); ?>confirm_order" method="post">
<fieldset>
<div class="span4">
<!-- Left Side -->
<input type="radio" checked="checked" name="paypal">Paypal<br/>
<input type="radio" name="cart">Visa, Master Card, etc<br/>
<input type="radio" name="cash_on_delevary">Cash on Delivery
<!-- End Left Side -->
</div>
<div class="span4">
<!-- Right Side -->
<div class="control-group" id="paypal">
<label class="control-label" >Paypal Payment</label>
</div>
<div class="control-group" id="Cart">
<label class="control-label" >Cart</label>
</div>
<div class="control-group" id="cash_on_delevary">
<label class="control-label" >Cash on Delevary</label>
</div>
<!-- end Right Side -->
</div>
<input type="submit" name="Continue" class="btn btn-orange pull-right">
</fieldset>
</form>
What can I do?

Answer 1

This will work:
$("input[type='radio']").change(function() {
$(".control-group").hide();
$("#" + this.name).show();
});

Answer 2

If you want radiobutton to work, you need to assign them the same name, else when you select 1, the others wont deselect.
What you should do is to assign a data on element to know wich section they show :
<input type="radio" data-for='paypal' checked="checked" name="payment">Paypal<br/>
<input type="radio" data-for='Cart' name="payment">Visa, Master etc<br/>
<input type="radio" data-for='cash_on_delevary' name="payment">Cash on Delevary
And then You bind the change event :
$("input[name=payment]").change(function() {
$(".control-group").hide();
$("#" + $(this).data("for")).show();
});
But to hide every section at start, you need to add this :
$(".control-group").hide();
$("input[name=payment]:checked").trigger('change')
Here's a fiddle : http://jsfiddle.net/a9Fvn/