Contact us: +61 8 8226 8800

Department for Communities and Social Inclusion

Tabbed Accordion layout

Tabbed Accordion layout is a list of content in Accordions that is grouped by a set of Tabs.

This is useful for displaying a lot of content grouped by category and sub-categories. See Example


Example of Tabbed Accordion layout.


The Accordions and Tabs are automatically generated according to a specific layout of content in the Tree. A main page [1] is comprised of nested content calls to a Tabbed Accordion widget [2] that builds the tabs and accordions appropriately. Any further page information can be included by nesting a standard page in the required position either before or after the two widget calls [3].

When calling the asset listing widgets you must add an additional option variable with name "root" and a value which is the asset ID of the asset that contains the content for this listing.[11]  In the examples below this value is 51631 in both instances. In this Tabbed Accordions layout these two root IDs will always be the same.

The widget consists of two parts - one builds the Tabs [8] and the other builds the Accordions [9]. Each must be called from the main content pages nested content areas in order.

The page information [4], folders (which form the Tabs) [5] and pages [6] under the content folders must all be nested beneath the main page [1] and these can be edited by content administrators by granting the appropriate permissions and removing write / admin permission from the main page [7]. While the actual layout code is protected by being in the Global Nested Content folder [10] (which should not have any write permission for content administrators by default).

State Government of South Australia © Copyright DHS .

Provided by:
SA Department for Human Services
Last Updated:
05 Jul 2018
Printed on:
20 Aug 2018
The DHS website is licensed under a Creative Commons Attribution 3.0 Australia Licence. © Copyright 2016