Here I have explained the events of radio button with javascript.
Let me explain the scenarion first,
We are having two radio button say radioobtn1 and radiobtn2. If I click on the button 1 then I need to show one DIVor FORM. same as when I click on radiobtn 2. I have given the code for the above scenarion.

<script>
function show()
{
if(document.getElementById('radiobtn1').checked)
{
document.form1.style.display='block';
document.form2.style.display='none';
}
else
{
document.form1.style.display='none';
document.form2.style.display='block';
}
}
</script>


<input type="radio" checked="checked" onClick="javascript:show()" name="radiobtn1" id="radiobtn1" value="radiobtn1" /> Radiobtn1
<input type="radio" name="radiobtn2" onClick="javascript:show()" id="radiobtn2" value="radiobtn2" /> radiobutton2

<form action='#url' name="form1" METHOD='POST'>
<table>
<tr class="displaynone">
<td>THIS IS FORM1
contents goes here
</td>
</table>
</form>


<form action='#url' class="displaynone" name="form2" METHOD='POST'>
<table>
<tr class="displaynone">
<td>THIS IS FORM2:

contents goes here

</td>
</table>
</form>
 
 
Hope this should help for freshers and even for all.....
 
Happy Coding!!!!!!!!!
 
 
 

Hi All,

     Here you can get the idea about the expanding of div inside an master page or any other pages. This has some animation. That is if you click on the Login Link then the below login tab will be open with some animation.
    Here you may find the style used for this sample in style tag. Please have a look at the following coding,

This should be inside the head tag.

<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
#expand
{
display: none;
background-color: Transparent;
position: absolute;
z-index: 100; /* padding: 16px;
background-color: Blue;
z-index: 1000;
width:350px; */
}

.expandInfo
{
background-color: Transparent;
margin: 0;
padding: 0px;
}
</style>
 

<script type="text/javascript">
<!--
$(function () {
$('.expandInfo a').click(function () {
$('#expand').slideToggle(1500);
return false;
});
})
//-->
</script>

<script type="text/javascript">
<!--
$(function () {
$('.expandInfoClose a').click(function () {
$('#expand').slideToggle(1500);
return false;
});
})
//-->
</script>
 
Then the body content may be as follows,
 
<div class="bg">
<p class="expandInfo">
<a href="#home" title="Login" class="login" style="width: 100px; height: 100px;">Login</a>
</p><br />
<br />
<div id="expand"><table cellpadding="0" cellspacing="0" class="loginbg">
<tr>
<td valign="top" style="padding-left: 30px">
<div style="float: right; padding-right: 10px">
<p class="expandInfoClose">
<a href="#home" title="Close">
<asp:Image runat="server" ID="imgcloselog" SkinID="imgLoginBoxClose" />
</a>
</p>
</div>
<asp:Panel runat="server" ID="pnlLoginMaster" DefaultButton="btnLogin">
<table cellpadding="4" cellspacing="4" align="left" style="margin-top: 60px;">
<tr>
<td align="left" valign="top">
<%--// CONTENTS--%>
cellspacingcellspacingcellsp acingcellspacing cellspacing cellspacingcells pacingcellspacingcellspacing
cellspacing cellsp acing cellspa cingcellspa cingcel lspacingce llsp acing
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
</table>
</div>
</div>

You can download the jquery here
If you have any questions please feel free to post comments....
Suggessions always welcome ..........Happy coding!!!!!!!

Meet you again!!!!!!!!