djAccordionPane - Dojo Accordion Pane

Provides content for one pane in an accordion container.

Category

Extension Library

Syntax

<xe:djAccordionPane attributes>content</xe:djAccordionPane>
Table 1. Essential properties
Property Description
id Defaults to djAccordionPane1, djAccordionPane2, and so on.
title Applies a label to the pane. Use tooltip for accessibility.
Table 2. All properties
Category Properties
accessibility title, waiRole, waiState
basics binding, dir, errorMessage, extractContent, href, id, lang, loaded, loadingMessage, partialRefresh, preload, preventCache, refreshOnShow, rendered, rendererType
dojo dojoAttributes, dojoType, dragRestriction, parseOnLoad, tooltip
events onBlur, onClick, onClose, onContentError, onDblClick, onDownloadEnd, onDownloadError, onDownloadStart, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onLoad, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow, onUnload
styling disableTheme, style, styleClass, themeId

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>