The Accordion component is an interface element similar to a vertical set of tabs - when you click on the header of an accordion panel, the header animate either up or down to reveal its associated container. The Accordion component generally tends to have a depth of one level unlike tabs where multilevel tabsets exist. Being rendered vertically, there is space to accommodate more markup than simply the name of the tab. Thus an accordion tab can contain a lot more information than a normal tab ususally does. The Accordion component is the container for Accordion Tab components.
This component is a JavaServer Faces 1.2 component. You see components that use this
version of JavaServer Faces when your project uses Java EE 5. For more information on JavaServer Faces 1.2,
see:
After dragging the accordion from the Woodstock Composite category of the Palette to the Visual Designer, you can:
Select the Accordion component and edit its properties in the Accordion's Properties window. Some typical properties you might set are:
id. The name of the component. In the JSP file, this name is the value of the component's id attribute. In the page bean, this property's value is the name of the Accordion object.
multipleSelect. When selected, multiple tabs can be selected at the same time. When you deslect this property, only one tab can be selected at a time.
toggleControls. When selected, the user has the option to expand and collapse the accordion.
Right-click the Accordion component and choose one of several actions:
Add Accordion Tab. When you choose Add Accordion Tab, an Accordion Tab component is added to the Accordion component. The added Accordion Tab is selected by default. You can add as many tabs as your project requires.
Add Binding Attribute. This option adds a binding attribute to the component.
Note: If you plan to script the component in Java code, you must manually add a binding attribute, which is bound using a value binding expression to a property of the backing page bean.
Remove Binding Attribute. This option removes the binding attribute from the component.
Snap to Grid. This option aligns the Accordion component along the grid lines in the Visual Designer.
Preview in Browser. See how the page renders in the default web browser for your system.