Ajax Collapable panel extender Sample using asp.net

04:29
Here i am explaining how to use ajax collapsable panel extender in asp.net

1.Create website in visual studio and add one form to the web site then write the design like below.

<head runat="server">
    <title></title>
    <style type="text/css">
        .pnlCSS
        {
            font-weight: bold;
            cursor: pointer;
            border: solid 1px #c0c0c0;
            width: 30%;
            background-color: Orange;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Panel ID="pnlClick" runat="server" CssClass="pnlCSS">
            <div>
                <table>
                    <tr>
                        <td>
                            <asp:LinkButton ID="lbtnlogin" runat="server" Text="LogIn"></asp:LinkButton>
                            &nbsp;&nbsp;<asp:Label ID="lbltext" runat="server" Text="Sample"></asp:Label>
                        </td>
                    </tr>
                </table>
            </div>
        </asp:Panel>
        <asp:Panel ID="pnlCollapsable" runat="server" CssClass="pnlCSS">
            <div>
                <table>
                    <tr>
                        <td colspan="2" align="center">
                            LogIn
                        </td>
                    </tr>
                    <tr>
                        <td>
                            UserName/Email-Id:
                        </td>
                        <td>
                            <asp:TextBox ID="txtuname" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Password:
                        </td>
                        <td>
                            <asp:TextBox ID="txtpwd" runat="server" TextMode="Password"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <asp:Button ID="btnlogin" runat="server" Text="LogIn" />
                            <asp:Button ID="btncancel" runat="server" Text="Cancel" />
                        </td>
                    </tr>
                </table>
            </div>
        </asp:Panel>
        <asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" CollapseControlID="pnlClick"
            Collapsed="true" ExpandControlID="pnlClick" TextLabelID="lbltext" CollapsedText="Show"
            ExpandedText="Hide" ExpandDirection="Vertical" TargetControlID="pnlCollapsable"
            ScrollContents="false">
        </asp:CollapsiblePanelExtender>
    </div>
    </form>
</body>

2.then run the page And observe thats it very simple enjoy happy coding....