CollapsiblePanel in ajax
introduction : This tutorial explain how to use collapsible panel in with the using the ajax you can learn how to hide the content and show the content of web page
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.pnl
{
cursor: pointer;
border: solid 1px #000000;
width:100%;
}
.style1
{
width: 100%;
}
.style2
{
width: 50%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div style="width:400px;">
<asp:Panel ID="Panel1" runat="server" CssClass="pnl">
<div style="background-image: linear-gradient(#ebf2f6, #ebf2f6); height:30px;">
<div style="float:left; color:Black;">
Collap Panel
</div>
<div style="float:right; color:Black; padding:5px 5px 0 0">
<asp:Label ID="lblmgs" runat="server" Text="Label"/>
<asp:Image ID="Arrow" runat="server" Height="20px" Width="20px" />
</div>
</div>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" Height="0" CssClass="pnl" BackColor="#c6e2ff">
<table class="style1">
<tr>
<td class="style2" style="text-align: right">
Name:</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style2" style="text-align: right">
PWD:</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style2" style="text-align: right">
City:</td>
<td>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style2" style="text-align: right">
</td>
<td>
<asp:Button ID="Button1" runat="server" Text="Login" />
</td>
</tr>
</table>
</asp:Panel>
<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
CollapseControlID="panel1"
Collapsed="true"
ExpandControlID="panel1"
TextLabelID="lblmgs"
CollapsedText="Show"
ExpandedText="Hide"
ImageControlID="Arrow"
CollapsedImage="down.png"
ExpandedImage="uparrow.png"
ExpandDirection="Vertical"
TargetControlID="panel2"
ScrollContents="false">
</asp:CollapsiblePanelExtender>
</div>
</form>
</body>
</html>
* with collaping panel the content elemen can be hide and seen as following image:
* Without collaps page can seen as below &with using arrow you can hide and show the content :
<head runat="server">
<title></title>
<style type="text/css">
.pnl
{
cursor: pointer;
border: solid 1px #000000;
width:100%;
}
.style1
{
width: 100%;
}
.style2
{
width: 50%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div style="width:400px;">
<asp:Panel ID="Panel1" runat="server" CssClass="pnl">
<div style="background-image: linear-gradient(#ebf2f6, #ebf2f6); height:30px;">
<div style="float:left; color:Black;">
Collap Panel
</div>
<div style="float:right; color:Black; padding:5px 5px 0 0">
<asp:Label ID="lblmgs" runat="server" Text="Label"/>
<asp:Image ID="Arrow" runat="server" Height="20px" Width="20px" />
</div>
</div>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" Height="0" CssClass="pnl" BackColor="#c6e2ff">
<table class="style1">
<tr>
<td class="style2" style="text-align: right">
Name:</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style2" style="text-align: right">
PWD:</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style2" style="text-align: right">
City:</td>
<td>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style2" style="text-align: right">
</td>
<td>
<asp:Button ID="Button1" runat="server" Text="Login" />
</td>
</tr>
</table>
</asp:Panel>
<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
CollapseControlID="panel1"
Collapsed="true"
ExpandControlID="panel1"
TextLabelID="lblmgs"
CollapsedText="Show"
ExpandedText="Hide"
ImageControlID="Arrow"
CollapsedImage="down.png"
ExpandedImage="uparrow.png"
ExpandDirection="Vertical"
TargetControlID="panel2"
ScrollContents="false">
</asp:CollapsiblePanelExtender>
</div>
</form>
</body>
</html>
* with collaping panel the content elemen can be hide and seen as following image:
* Without collaps page can seen as below &with using arrow you can hide and show the content :
Sign up here with your email
ConversionConversion EmoticonEmoticon