Table of Contents


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.

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


  • 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.

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.


  • The height attribute may be used to set a specific height on all panes, eg. height="200".

Nested Forms

  • The accordion supports nested forms. Use the accordionFormProxy along with the accordion for nested form support.

Component Documentation

accordionFormProxy (as of 1.3.1)

Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

© Copyright 2016 ICEsoft Technologies Canada Corp.