Use of AJax Collapsible Panel Extender tool in Asp.Net with attaractive background and Collapse and Expand images

First of all add a referance for AjaxControlToolKit to your page ::
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

Add following css inside <head> tag ::

  <style type="text/css">
.pnlCSS{
font-weight: bold;
cursor: pointer;
border: solid 1px #c0c0c0;
width:30%;
border-radius:10px;
background-color:white;
}
.pnlClick
{
    font-weight: bold;
cursor: pointer;
border: solid 1px #c0c0c0;
width:30%;
border-radius:10px;
background-color:Gray;
}

.Water
{
    font-weight:lighter;
    font-style:italic;
    color:Gray;
    width:220px;
    border-round:5px;
 

}

</style>



Add two panel inside your <body> tag and Attach AjaxControlToolKit control and drag and drop the CollapsiblePanelExtender like below::

   <asp:Panel ID="pnlClick" runat="server" CssClass="pnlClick">
<div style="width:100%; height:30px; vertical-align:middle">
<div style="float:left;  color:White;padding:5px 5px 5px 5px">
Registration Form
</div>
<div style="float:right; color:White; padding:5px 5px 0 0">
<asp:Label ID="lblMessage" runat="server" Text="Label"/>
<asp:Image ID="imgArrows" runat="server" />
</div>
<div style="clear:both"></div>
</div>
</asp:Panel>
        
       <asp:Panel ID="Panel1" runat="server" CssClass="pnlCSS">
       <asp:UpdatePanel ID="UpdatePanel1" runat="server">
       <ContentTemplate>   
<table align="center" style="padding-left:10px; padding-right:10px">

        <tr><td><asp:Label ID="Label1" runat="server" AssociatedControlID="TextBox1" AccessKey="u" Text="<u>U</u>serName"></asp:Label></td>
        <td>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" TargetControlID="TextBox1" WatermarkText="Enter User Name" WatermarkCssClass="Water" runat="server">
            </asp:TextBoxWatermarkExtender>
            </td></tr>
            <tr><td>
                <asp:Label ID="Label2" runat="server" AssociatedControlID="TextBox2" AccessKey="a" Text="<u>A</u>ddress"></asp:Label></td>
                <td>
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                    <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" TargetControlID="TextBox2" WatermarkText="Enter Address" WatermarkCssClass="Water" runat="server">
            </asp:TextBoxWatermarkExtender>
                    </td></tr>
                     <tr><td>
                <asp:Label ID="Label3" runat="server" AssociatedControlID="TextBox3" AccessKey="m" Text="E<u>m</u>ail"></asp:Label></td>
                <td>
                    <asp:TextBox ID="TextBox3" runat="server">
                    </asp:TextBox>
                    <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender3" TargetControlID="TextBox3" WatermarkText="Enter Email Address" WatermarkCssClass="Water" runat="server">
            </asp:TextBoxWatermarkExtender>
                    <asp:RegularExpressionValidator
                        ID="RegularExpressionValidator1" runat="server" ErrorMessage="Enter correct Email ID" ControlToValidate="TextBox3" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator></td></tr>
                    <tr>
    <td>
                <asp:Label ID="Label4" runat="server" AssociatedControlID="TextBox4" AccessKey="p" Text="<u>P</u>assword"></asp:Label></td>
    <td>
        <asp:TextBox ID="TextBox4" runat="server" TextMode="Password"></asp:TextBox>
         <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender4" TargetControlID="TextBox4" WatermarkText="Enter password" WatermarkCssClass="Water" runat="server">
            </asp:TextBoxWatermarkExtender>
        <asp:PasswordStrength ID="TextBox4_PasswordStrength" runat="server" 
            Enabled="True" TargetControlID="TextBox4" StrengthIndicatorType="BarIndicator"   BarBorderCssClass="barBorder" BarIndicatorCssClass="BarInternalGreen" TextStrengthDescriptions="Poor;Weak;Average;Good;Very good;Excellent"></asp:PasswordStrength>
        
    </td></tr>
    <tr><td><asp:Label ID="Label6" runat="server" Text="Upload Image"></asp:Label></td><td><asp:FileUpload ID="upload1" runat="server" />
        <br />
        <label id="lblmsg" style="font-weight:bold; color:Red" /> </td></tr>
         <tr><td>
        <asp:Label ID="Label7" runat="server" AssociatedControlID="txtCaptcha" AccessKey="c" Text="Enter <u>c</u>ode"></asp:Label></td>
        <td>
                    <asp:TextBox ID="txtCaptcha" runat="server"></asp:TextBox>
                    <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender5" TargetControlID="txtCaptcha" WatermarkText="Enter captcha code" WatermarkCssClass="Water" runat="server">
            </asp:TextBoxWatermarkExtender>
                </td>
        </tr>
        <tr>
        
         <td>&nbsp;</td>
                           
                                    <td>
                                        <asp:Image ID="imgCaptcha" runat="server" />
                                        <asp:ImageButton ID="ImageButton1" runat="server" Height="30px" Width="20px" ImageUrl="~/images/refresh.gif" OnClick="btnRefresh_Click"/>
                                        <asp:Label ID="Label5" runat="server" Text=""></asp:Label>
                                    </td>
                              
        </table>
        </ContentTemplate>
</asp:UpdatePanel>
       <table align="center" style="padding-left:10px; padding-right:10px">
       <tr><td>&nbsp;</td><td>  <asp:Button ID="Button1" runat="server" Text="Submit" CssClass="buttonclass" 
                onclick="Button1_Click"/></td></tr>
       </table>
     
       
                 

    
 <asp:CollapsiblePanelExtender
ID="CollapsiblePanelExtender1"
runat="server"
CollapseControlID="pnlClick"
Collapsed="true"
ExpandControlID="pnlClick"
TextLabelID="lblMessage"
CollapsedText="Show"
ExpandedText="Hide"
ImageControlID="imgArrows"
CollapsedImage="~/images/expand.jpg"
ExpandedImage="~/images/collapse.jpg"
ExpandDirection="Vertical"
TargetControlID="Panel1"
ScrollContents="false">
</asp:CollapsiblePanelExtender>
           </asp:Panel> 




And don't forget to attach the script manager to your page ::

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

        </asp:ToolkitScriptManager>

Image before expansion::


Image after expansion when you click on Show div::



Comments

Popular posts from this blog

How to show enlarge image when mouse hover on image or link in Asp.Net(c#) using JavaScript

StateCode and StatusCode Values for mostly used entities in Microsoft Dynamics CRM 2013

Search data in Gridview on Textbox Key press event using JQuery in Asp.Net- C#

go to top image