TAccordion

TAccordion displays an accordion control. Users can click on the view headers to switch among different accordion views. Each accordion view is an independent panel that can contain arbitrary content.

A TAccordion control consists of one or several TAccordionView controls representing the possible accordion views. At any time, only one accordion view is visible (active), which is specified by any of the following properties:

• ActiveViewIndex - the zero-based integer index of the view in the view collection.
• ActiveViewID - the text ID of the visible view.
• ActiveView - the visible view instance.

If both ActiveViewIndex and ActiveViewID are set, the latter takes precedence.

TAccordion uses CSS to specify the appearance of the accordion headers and panels. By default, an embedded CSS file will be published which contains the default CSS for TAccordion. You may also use your own CSS file by specifying the CssUrl property. The following properties specify the CSS classes used for elements in a TAccordion:

• CssClass - the CSS class name for the outer-most div element (defaults to 'accordion');
• HeaderCssClass - the CSS class name for nonactive accordion div elements (defaults to 'accordion-header');
• ActiveHeaderCssClass - the CSS class name for the active accordion div element (defaults to 'accordion-header-active');
• ViewCssClass - the CSS class for the div element enclosing view content (defaults to 'accordion-view');

To use TAccordion, write a template like following:

<com:TAccordion>
   <com:TAccordionView Caption="View 1">
     content for view 1
   </com:TAccordionView>
   <com:TAccordionView Caption="View 2">
     content for view 2
   </com:TAccordionView>
   <com:TAccordionView Caption="View 3">
     content for view 3
   </com:TAccordionView>
 </com:TAccordion>