Ajax CollapsiblePanelExtender


Ajax CollapsiblePanelExtender in Asp.Net:

There are the following easy steps to understand how to use Ajax CollapsiblePanelExtender control in Asp.Net.

Step 1: Create new Ajax enabled web site.

Step 2: Now go to solution explorer and right click on root directory and click on Add reference then add AjaxControlTollkit.dll.

Step 3: Copy the following code and paste on to your page.

<%
@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%
@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head id="Head1" runat="server">
<title>CollapsiblePanel</title>
</
head>
<
body>
<form id="form1" runat="server">
    <asp:ScriptManager runat="server" ID="scriptManager1" />
    <div style="width: 410px; background: gray;">
        <asp:Panel runat="server" ID="panel1">
        <div style="font-weight: bold; background-color: ThreeDShadow;">
            <table width="100%">
                <tr>
                    <td align="left">Clicking Here To view my profile
                        <asp:Label runat="server" ID="textLabel" />
                    </
td
>
                    <td align="right" width="10px">
                        <asp:Image ID="Image1" runat="server" />
                    </
td
>
                </tr>
            </table>
        </div>
        </asp:Panel>
        
<asp:Panel runat="server" ID="panel2" Width="98%" HorizontalAlign="center">
        <div>
            <table width="100%">
                <tr valign="top">
                    <td align="left" width="100px">
                        <img src="myPhoto.jpg" />
                    </td>
                    <td align="left">Hi<br />This is Purushottam rathore<br />Noida-201301<br />India
                    </td>
                </tr>
            </table>
        </div>
        </asp:Panel>
        <ajaxToolkit:CollapsiblePanelExtender runat="server" ID="cpe" TargetControlID="panel2" CollapseControlID="panel1" ExpandControlID="panel1" Collapsed="true" CollapsedSize="0" ExpandedSize="120" ExpandedText="(Collapse...)" CollapsedText="(Expand...)" TextLabelID="textLabel" ImageControlID="Image1" ExpandedImage="Img/collapse.jpg" CollapsedImage="Img/expand.jpg">
    </ajaxToolkit:CollapsiblePanelExtender>
</div>
</form>
</
body>
</
html>

Step4:
Now Debug the application by press F5,

Output: you will get the following output:

Image1.JPG

Figure 1:

Click on the header or image (Right corner), you will see as follows:

Image2.JPG

Figure 2:

Up Next
    Ebook Download
    View all
    Learn
    View all