djAccordionContainer - Dojo Accordion Container

Contains panes that expand to reveal their content.

Category

Extension Library

Syntax

<xe:djAccordionContainer attributes>content</xe:djAccordionContainer>
Table 1. Essential properties
Property Description
id Defaults to ddjAccordionContainer1, djAccordionContainer2, and so on.
title This appears on the pane tab.
style Set the width and height.
Table 2. All properties
Category Properties
accessibility title, waiRole, waiState
dojo dojoAttributes, dojoType, dragRestriction, tooltip
basics binding, dir, duration, id, lang, loaded, rendered, rendererType, selectedTab
events onBlur, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
styling disableTheme, style, styleClass, themeId

All properties

Usage

This is a Dojo control.

An Accordion Container control holds any number of Accordion Pane controls. At any one time, one pane is open. The user opens a pane by clicking its title bar.

This control is not tested against the latest accessibility standards. The recommended accessible path is the Accordion control.

Examples

This example shows three Accordion Pane controls inside an Accordion Container control.
<xe:djAccordionContainer id="djAccordionContainer1"
	style="width:400px; height:100px;">
	<xe:djAccordionPane id="djAccordionPane1"
		title="Application title">
		<xp:text escape="true" id="computedField1" value="#{javascript:database.getTitle()}"></xp:text>
	</xe:djAccordionPane>
	<xe:djAccordionPane id="djAccordionPane2"
		title="Application file path">
		<xp:text escape="true" id="computedField2"
			value="#{javascript:database.getFilePath()}">
		</xp:text>
	</xe:djAccordionPane>
	<xe:djAccordionPane id="djAccordionPane3"
		title="Application creation date">
		<xp:text escape="true" id="computedField3"
			value="#{javascript:database.getCreated().getLocalTime()}">
		</xp:text>
	</xe:djAccordionPane>
</xe:djAccordionContainer>