View Source

h3. accordion

The accordion component manages a stack of contentPanes using accordion handles. The attribute *selectedId* determines which of the panes in the stack is currently visible. All other non-selected contentPanes are hidden from view.

{note} It's very important to understand the strategies associated with the contentPane and its parent layout components.
Please see [Content Pane] component wiki page.

h3. Usage

* Simple usage: each contentPane can control whether the content is pre-loaded and cached, or fetched dynamically. The accordion will manage the visibility of the panes.

<mobi:accordion id="accOne" selectedId="#{bean.selectedId}">
<mobi:contentPane id="pane1" client="true" title="Pane 1">
Pane 1 Content
<mobi:contentPane id="pane2" title="Pane 2">
Pane 2 Content
<mobi:contentPane id="pane3" facelet="true" title="Pane 3">
Pane 3 Content
* The exact same arrangement of contentPanes may be used as children for a tabset or contentStack component.

h4. Fit-to-parent (since 1.3.1)
* Be default, the accordion will have *fitToParent* true, which will size the accordion to the available space of its parent container. If you would like the accordion to exceed the boundaries of its container when overflowing, or leave empty space when under-flowing, set *fitToParent* to false.

h4. Fixed-height
* The *height* attribute may be used to set a specific height on all panes, eg. height="200".

h4. Nested Forms
* The accordion supports nested forms. Use the accordionFormProxy along with the accordion for nested form support.

h3. Component Documentation
[accordionFormProxy (as of 1.3.1)|]