Ajax Collapsible Panel Extender

Collapsible Panel Extender

This control is used to make a panel expanded and collapsed dynamically at runtime properties.

Target Control ID :

Expand Control ID : Used to specify ID of the control clicking on which the target control has to be expand.

Collapse Control ID : Used to specify ID of that control clicking on which the target control has to be collapsed.

Expanded size : Used to specify height of the target control when it is expanded.

Collapsed size : Used to specify height of the target control when it is collapsed.

Expanded Text : Used to specify the text to display when the target control is expanded within the text & label

Collapsed Text : Used to specify the text to display when the target control is collapsed within the text lagel.

TextLabelID: Used to specify ID of a label in which you want to display expanded text and collapsed text.

Example

The following example demonstrates how to use the collapsible panel extender.

Add a page to the website and then place a Tool kit Script manager & a label & panel on the page and for the label set the ID as L1 and provide some content within the panel.

Within HTML source of the page Drag & Drop a collapsible panel Extender and set following properties to it.

<asp: collapsible panel Extender ID=” collapsible panel Extender1 runat=”server” targetControlID=”panel1” Expand controlID=”L1” collapse control ID=”L1” ExpandSize=”150” collapsesize=”0” ExpandText=”[Click Here to collapse]” collapsed Text=”[click here to expand]” TextLableID=”L1”>  </asp: collapsible panel Extender>

At runtime By clicking on the Label L1 you can collapse and expand the panel