CollapsiblePanel Extender

The extender builds up a collapsible section in your pages by combining two panels—one acting as the content panel, and one being the expand/collapse controller. In its simplest form, the CollapsiblePanel extender looks like the following code sample:

act:CollapsiblePanelExtender ID="CollPanel" runat="server" TargetControlID="ContentPanel"
ExpandControlID="HeaderPanel"
CollapseControlID="HeaderPanel"

As usual, the TargetControlID property sets the target panel to expand or collapse.
ExpandControlID and CollapseControlID indicate the panel to use to expand and collapse the content panel. Note the extreme flexibility of the component design—it might not make sense in all cases, but you can use different panels to control the expansion and collapsing of the content panel. In most cases, though, you’ll be using the same header panel with an image button that changes according to the state of the content panel. The following code snippet shows a more complete usage for the extender:

act:CollapsiblePanelExtender ID="cpe" runat="server"
TargetControlID="CollapsibleCustomersPanelContent"
ExpandControlID="CollapsibleCustomersPanel"
CollapseControlID="CollapsibleCustomersPanel"
Collapsed="true"
ExpandDirection="Vertical"
ImageControlID="ToggleImage"
ExpandedImage="~/images/collapse.jpg"
ExpandedText="Collapse"
CollapsedImage="~/images/expand.jpg"
CollapsedText="Expand"

The ImageControlID indicates the Image control, if any, that if clicked causes the panel to expand or collapse. The ExpandedImage and CollapsedImage properties set the URL of the images to use to expand and collapse. Likewise, CollapsedText and ExpandedText set the Tool-Tip text for the image. Collapsed sets the state of the panel, whereas ExpandDirection indicates whether the panel expands horizontally or vertically. Figure provides a view of the control in action.





The following code demonstrates a typical pair of Panel controls used with the extender:

asp:Panel ID="CollapsibleCustomersPanel" runat="server">
ImageUrl="~/images/collapse.jpg" />
Customers
asp:Panel
asp:Panel ID="CollapsibleCustomersPanelContent" runat="server"
Height="0" CssClass="collapsePanel">
...
asp:Panel

Unlike draggable panels, the header and content panels are distinct and are typically placed
one after the next in the page layout. The extender panel is also postback aware, meaning that,
on a client postback, it automatically records and restores its collapsed/expanded client state.