Use collapsiblepanelextender to expand and contract

Generally, JS is used to expand and contract the webpage.CodeIt is troublesome to implement. Now there is a way to achieve brilliant expansion and contraction without writing a JS Code. That is, the collapsiblepanelextender control is used. The space belongs to Microsoft's atlas,

Http://atlas.asp.net/default.aspx? Tabid = 47 & subtabid = 471

First, you must add at least two panels on the page. The first panel is used to hold the title, and the second panel is used to hold the content. When you click the first panel, you can control the expansion and contraction of the first panel. The most basic code is as follows:

<PC3: collapsiblepanelextender id = "collapsiblepanelextender1"
Runat = "server">
<PC3: collapsiblepanelproperties

Collapsecontrolid = "Panel1"

Expandcontrolid = "Panel1"
Targetcontrolid = "panel2"/>

</PC3: collapsiblepanelextender>

The targetcontrolid attribute refers to the controlled panel, which is panel2.

The expandcontrolid attribute refers to the control expanded panel, which is Panel1, that is, panel2 is displayed when you click Panel1.

The attribute collapsecontrolid refers to the Panel that controls contraction. Here is panel1.

These three are the most basic and commonly used attributes, and there are many other attributes. flexible use of these attributes can implement many dazzling functions. Next we will briefly introduce other attributes.

Targetcontrolid: The controlled panel.

Collapsedsize: size of the target after contraction

Expandedsize: Size of the expanded target

Collapsed: expand when true or contract when false

Scroll contents: When the value is true and the size of the target panel is smaller than the size of the content, the scroll bar is automatically added.

Expandcontrolid/collapsecontrolid: Click these controls to expand or contract the target panel.

Textlabelid: indicates the ID of a label control. The value of this label changes according to the status of the target panel.

Collapsedtext: Set the lable value indicated by textlabelid when the target panel is scaled down.

Expandedtext: Set the lable value indicated by textlabelid when the target panel is expanded.

Imagecontrolid: indicates an image control. The control changes the Image Based on the status of the target panel.

Collapsedimage: indicates the path of the image indicated by imagecontrolid when the target panel is scaled.

Expandedimage: indicates the path of the image indicated by imagecontrolid when the target panel is expanded.

Expanddirection: indicates the direction of horizontal or vertical expansion and contraction of the target panel.