Accordion menus are used to order content. It is a vertically stacked list of items where each item can be expanded or opened to reveal the detailed content associated with that item. It works like the accordion musical instrument where it is tight and then expanded:
To reduce page loading times, please limit the amount of accordions to no more than three per page. We recommend limiting the number of pages within one accordion to five. Do not create an accordion within an accordion.
Tabs are similar to browser tabs, allowing the user to open one set of information at a time:
1. Create a new folder asset.
2. Enter the details: Name for the accordion (this does not show up on the page anywhere), select 'no' for 'Show in menu,' and select the page you would like to put the accordion on as the Location. Click Create when this is done.
3. Select Edit your Accordion folder asset and go to the New asset tool.
4. Create as many Standard Page assets as you need to drop down in your accordion - and save them all in your accordion folder. Each drop-down section in an accordion is a Standard Page asset and the heading is the name of the page asset.
5. Select Edit your standard page asset.
6. Add the content you would like under the page heading on the Content screen in a WYSIWYG content container.
7. Once you have finished adding all the content to your Standard Page assets in your Accordion folder, go to the Asset Finder and Select the Standard Page asset you would like to put the accordion on.
8. Insert a new content container on the page. In the drop-down menu next to 'Content Type,' select 'Nested content' and click the insert button.
9. In the Nested Content Container select your accordion folder asset.
10. Click the 'Show additional options' button.
11. New drop-down menus will appear. Click the box that says 'No paint layout,' and select the third option: 'Select from a list of predefined Paint Layouts.' Another drop-down menu will appear; select 'Accordion' from this list.
12. Click Save. You can now Preview your page, where the accordion should display like this:
For tabbed content, repeat steps 1-11. Instead of selecting 'Accordion' from the 'Select from a list of predefined Paint Layouts' dropdown, select Tabbed content.
Tabbed content will look like this: