Radio button change function

/*
if there exist a group of html radio button having same name attribute their click or change can be determined as follows
*/
$("input:radio[name=Test]").change(function () {
    var value = $(this).val();
 });

Inside body tag

<input type="radio" name="Test" value="1"/>
<input type="radio" name="Test" value="2"/>
<input type="radio" name="Test" value="3"/>

EXPANDING COLLAPSING DIV

/*
if there a situation that need to have arrange div as blocks/bricks structure then follow this
*/

STEP1:
<link href="../Script/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<script src="../Script/jquery.min.js" type="text/javascript"></script>
STEP2:

<script type="text/javascript">
        $(document).ready(function () {
            $("#expanderHead").click(function () {
                $("#expanderContent").slideToggle();
                if ($("#expanderSign").text() == "+") {
                    $("#expanderSign").html("−")
                }
                else {
                    $("#expanderSign").text("+")
                }
            });
        });
</script>
STEP3:

  <div id="expanderHead" style="cursor: pointer; background-color: Gray; width: 250px;padding-left:10px" class="ui-corner-all">
            EXPANDING COLLAPSING DIV <span id="expanderSign" style="color: Black;font-size:larger"><b>+</b></span>
        </div>
        <div id="expanderContent" style="display: none;padding-left:30px">
            content<br />
            content<br />
            content<br />
            content<br />
            content<br />
        </div>

Expand Collapse (toogle) div

/*
if there a situation that need to have arrange div as blocks/bricks structure then follow this
*/

STEP1:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
STEP2:
<div class="divHeading">
Heading 1
</div>
<div class="divContent">
contents here 1
</div>
<div class="divHeading">
Heading 2
</div>
<div class="divContent">
contents here 2
</div>

STEP3:
.divHeading {
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#c30;
}
.divContent {
padding: 5px 10px;
background-color:#fafafa;
}

STEP4:
<script type="text/javascript">
$(document).ready(function() {
  $(".divContent").hide();
  //toggle the componenet with class msg_body
  $(".divHeading").click(function()
  {
    $(this).next(".divContent").slideToggle(500);
  });
});
</script>