Show And Hide Concept in Radio Button

Show hide concept based on similar div hide and show concept but choose the radio button div will be display function make on jquery. radio button value name call on div just choose radio button value increased div action show/ hide. jquery function called input names to changes the divs values. also having live demo

1.Copy the Script in head tag

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
   <script>
$(document).ready(function() {
    $("input[name$='cars']").click(function() {
        var test = $(this).val();
 
        $("div.desc").hide();
        $("#Cars" + test).show();
    });
});</script>

2.Copy the Below coding in body tag

<div id="myRadioGroup" align="center">
    <p><input type="radio" name="cars" checked="checked" value="2" />Online Payment</p>
    <p><input type="radio" name="cars" value="3" />Door Delivery</p>
</div>
 
<div id="Cars2" class="desc">
       <table width="426" height="127">
         <tr>
           <td>Your Card Number</td>
           <td><label for="card"></label>
           <input type="text" name="card" id="card" size="35" /></td>
         </tr>
         <tr>
           <td>Password</td>
           <td><label for="pass"></label>
           <input type="text" name="pass" id="pass"  size="35"/></td>
         </tr>
         <tr>
           <td colspan="2" align="center"><input type="submit" name="submit" id="sub4" value="Submit" /></td>
         </tr>
       </table>
    </div></form>
 
    <div id="Cars3" class="desc" style="display: none;">
        <table>
        <tr><td>ADDRESS-1</td><td><textarea name="add1" cols="" rows=""></textarea></td></tr>
 
           <tr><td>Number</td><td><input type="text" name="phone" placeholder="Enter u r ph number"></td></tr>
 
                <tr><td colspan="2"><input type="submit" name="submit2" value="submit" /></td></tr>
                </table>
 
    </div>

Live Demo

Online Payment Door Delivery

Your Card Number
Password

ADDRESS-1
Number