show and hide divs based on radio button click
<div align="center">
<input type="radio" name="name_radio1" id="id_radio1" value="value_radio1">Radio1
<input type="radio" name="name_radio1″ id="id_radio2" value="value_radio2″>Radio2
</div>
<br />
<div align="center" id="id_data" style="border:5″>
<div>this is div 1</div>
<div>this is div 2</div>
<div>this is div 3</div>
<div>this is div 4</div>
</div>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
// show the table as soon as the DOM is ready
$("#id_data").show();
// shows the table on clicking the noted link
$("#id_radio1").click(function() {
$("#id_data").show("slow");
});
// hides the table on clicking the noted link
$("#id_radio2").click(function() {
$("#id_data").hide("fast");
});
});