How to Use Asp.net ajax Collapsible Panel Extender

How to Use Asp.net ajax Collapsible Panel Extender

1) Create Website2) Add aspx page
3) Add toolkitScriptManager
4) If you don't have ajax control toolkit  download from codeplex
5) Add Collapsible Panel Extender

ASP:COLLAPSIBLEPANEL  Properties
1) TargetControlID -  The panel which user expands/collapes
2) CollapseControlID/ExpandControlID/ImageControlID -  This is used for display collpase/expand image set in CollapsiblePanel

3)  TextLabelID ->Expand/Collapse Text Will be displayed

4) ExpandDirection -> Horizontal/Vertical 

5)ExpandText/CollapseText->Text will be displayed next to Expand/Collapse Image.

Here is CollapsiblePanelExtender  demo

    <img src="" id="imgControlID" width="25px" height="25px" />

    <asp:Label ID="lblText" runat="server" BackColor="red" ForeColor="White" Font-Bold="true"></asp:Label>

    <asp:Panel ID="Panel1" runat="server" BackColor="Teal" ForeColor="White">

    <pre>

    PK_ProductID ProductName Brand Price

1 Monitor LCD LG 100.00

2 Mouse Microsoft 30.00

3 Keyboard Siemens 66.00

4 External HDD Sea Gate 150.00

5 Web Cam 5mp Sony 80.00

</pre>

    </asp:Panel>

        <asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"

         ImageControlID="imgControlID"

          TargetControlID="Panel1" TextLabelID="lblText"

           CollapseControlID="imgControlID"

            Collapsed="false"  CollapsedImage="~/expand.jpg"

             CollapsedText="Expand Product Details"             

               ExpandedText="Collpase Product Details"

               ExpandControlID="imgControlID"

               ExpandDirection="Vertical"

                ExpandedImage="~/collapse.jpg">

        </asp:CollapsiblePanelExtender>

    </div>

5) Run the Page