Ajax toolkit control -- collapsiblepanelextender (hide & Display Effect)

[Reference] "This extender targets any ASP. NET panel control. You specify which control or controls on the page shocould act as the Open and Close controllers for the Panel ."

 

Attribute name	Description
Targetcontrolid	The ID of the Panel for which you want to use the show and hide effects.
Collapsesize	Size of the target in PX format)
Expandedsize	The size of the target in pixels)
Collapsed (true or false)	Whether to collapse when the target is rendered, false (default) -- expand, true -- fold
Autocollapse	Whether to automatically fold when the mouse moves out of the expanded panel, false (d) -- not fold, true -- fold
Autoexpand	Whether to expand automatically when the mouse enters the collapsed panel. False (d) -- do not expand, true -- expand
Scrollcontents	True -- scroll bar appears when there are too many contents; false -- trim the content
Expandcontrolid	You can click to expand the panel control ID
Collapsecontrolid	You can click to collapse the widget ID of the Panel.
Collapsedtext	The text when the Panel is folded, such as: "Show Details ..."
Expandedtext	The text when the Panel is in the expanded state, such as: "hide details ..."
Textlabelid	The label Control ID used to display the Panel status, that is, the content of collapsedtext and expandedtext.
Imagecontrolid	Similar to textlabelid, an image that displays the status of a panel
Expandedimage	Image URL when the Panel is expanded
Collapsedimage	Image URL when panel is folded
Expanddirection	Horizontal or vertical)

The effect of the collapsiblepanelextender control is to hide and display the content in the panel of a specific control. It is the same as accordion, but it does not play down the effects.

ExamplesCode:

   <  ASP: toolkitscriptmanager  ID  = "Toolkitscriptmanager1" Runat  = "Server"  >  
  </  ASP: toolkitscriptmanager  >  
  <  ASP: Panel  ID  = "Panel1"  Cssclass  = "Panel1"  Runat  = "Server"  > 
  <  P  >  
Panel panel
  </  P  >  

  </  ASP: Panel  >  
  <  ASP: Label  ID  = "Label1" Runat  = "Server"  >  This is used to display the Panel status.  </  ASP: Label  >  
  <  ASP: linkbutton  ID  = "Linkbutton1"  Runat  = "Server"  >  Click here  </ ASP: linkbutton  > <  ASP: Image
  ID  = "Image1"  Runat  = "Server"     />  
  <  ASP: collapsiblepanelextender  ID  = "CPE"  Runat  = "Server" Targetcontrolid  = "Panel1"  Collapsedsize  = "0"  
Expandedsize  = "300"  Collapsed  = "True"  Expandcontrolid  = "Linkbutton1"  Collapsecontrolid  = "Linkbutton1"  
Autocollapse  = "False"  Autoexpand = "False"  Scrollcontents  = "True"  Textlabelid  = "Label1"  
Collapsedtext  = "Show Details ..."  Expandedtext  = "Hide details ..."  Imagecontrolid  = "Image1"  
Expandedimage  = "~ /Images/gotop.png"  Collapsedimage = "~ /Images/down.png"  Expanddirection  = "Vertical"     /> 

For more properties, see> @ http://www.asp.net/ajaxlibrary/act_CollapsiblePanel_Reference.ashx