section - Section

Serves as a collapsible container for other controls and text

Category

Container Controls

Syntax

<xp:section attributes>content</xp:section>
Table 1. Essential properties
Property Description
id Defaults to section1, section2, and so on.
header The header appears at the top of the section and is visible when the section is collapsed.
type The formatting types are:
  • default: no border
  • wide: gray bar at the bottom
  • box: gray bars on all four sides
  • tab: gray background for arrow and section contents below the arrow
initClosed By default the section is initially opened.
Table 2. All properties
Category Properties
accessibility accesskey, role, tabindex, title
basics attrs, binding, collapsedImage, dir, disabled, expandedImage, header, id, initClosed, lang, loaded, rendered, rendererType
events onblur, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup
format type
styling disableTheme, headerStyle, style, styleClass, themeId

Usage

At run time, the section appears on the page:
  • A closed section shows only the header.
  • An open section shows the header and contents.
The user can open and close the section.

Examples

This section contains two edit boxes.
<xp:section id="section1" header="Phone numbers" type="tab"
	initClosed="true">
	<xp:inputText id="inputText2" value="#{document1.phoneday}"></xp:inputText>day
	<xp:br></xp:br>
	<xp:inputText id="inputText3" value="#{document1.phonenight}"></xp:inputText>night
</xp:section>