Tab One (accordion-tabs Overview)

These tabs become an accordion when there is not enough width for the tab headers to fit on a single row.

(resize your browser window to see this work)

Clicking an open tab-header will close it when in accordion mode.

Click the next tab to learn more.
Tab Two the Second (II) (the data model)

The tab content can be supplied with a tab_content entry in the model. A search_result model can also be supplied. Other data structures can be added to the template as needed.

Click the next tab to learn more.
Tab Three (a layout limitation)

The tab content has an absolute position and so instances of this component may need to explicitly set the height to stop content subsequent to the accordion-tabs disappearing beneath it.

Click the next tab to learn more
Tab 4 (event callback)

When the user changes the active tab the (optional) function fnOpenTab (passed in the ops parameter of the init function) will be called - the active tab index is passed into this function as its only parameter.

(in this example text is written to the document body)