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

How to add custom filter lookup field based on OptionSet field selection in Dynamics CRM.

go to top image