Use below images ..
====================== ASPX Script =======================
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<table style="width: 308px; background-color: cadetblue">
<tr>
<td style="height: 30px">
<img id="img1" src="Images/gvCollapsedButton.png" onClick="return Fun1();" />
<asp:Label ID="Button1" runat="server" Text="click on me to Expand / Collapse" OnClientClick="return Fun1();" /></td>
</tr>
<tr>
<td>
<div id ="MyDiv" style="background-color: #ccffff; width: 300px; height: 59px; display: none;">
<br />
UserName :
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></div>
</td>
</tr>
</table>
</form>
</body>
<script type="text/javascript" language="javascript" >
// global variable
var status= "close";
// ============== Script to hide and show ....
function Fun1()
{
if (status=="close")
{
document.getElementById("MyDiv").style.display = 'block';
document.getElementById("img1").src= 'Images/gvExpandedButton.png';
status="open";
}
else
{
document.getElementById("MyDiv").style.display = 'none';
document.getElementById("img1").src= 'Images/gvCollapsedButton.png';
status="close";
}
return false;
}
//=====================
</script>
</html>
==============================================================
No comments:
Post a Comment