<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery Show / Hide Div panels in asp.net</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#lnkbtn").click(function() {
if ($('#divreg').is(":hidden")) {
$('#divreg').show(500);
document.getElementById('lnkbtn').innerHTML = "Hide";
} else {
$("#divreg").hide(500);
document.getElementById('lnkbtn').innerHTML="Show";
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td><asp:LinkButton ID="lnkbtn" runat="server"><b>Hide</b></asp:LinkButton> </td>
</tr>
<tr>
<td>
<div id="divreg">
<table style="border:1px solid #000">
<tr>
<td colspan="2"><b>Registration Details</b></td>
</tr>
<tr>
<td>UserName:</td>
<td><asp:TextBox ID="txtUser" runat="server"/></td>
</tr>
<tr>
<td>Password:</td>
<td><asp:TextBox ID="TextBox1" runat="server"/></td>
</tr>
<tr>
<td><asp:RadioButtonList ID="rdbtnGender" runat="server">
<asp:ListItem>Male</asp:ListItem>
<asp:ListItem>Female</asp:ListItem>
</asp:RadioButtonList></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
No comments:
Post a Comment