CMS - Creating Feature Accordions | Creating Accordions

What is an accordion?

An accordion is a special type of table that can be used to display content in a condensed and uniformed way. A common use of accordion tables is onFrequently Asked Questions pages.

Creating an accordion

To create an accordion:

1. Go to your page, put it into Edit Mode, and decide where you want the accordion to be by clicking into a Text Feature and placing the cursor in the correct place
2. Click the table icon in the Text Feature toolbar, and create a table with the following parameters: Row = 2 , Column = 1, Border size = 0 , Width = 100%, Cell padding =10. Then click Advanced  and add the following CSS to the Stylesheet Classes field; site-table-accordion site-table-mobile and click OK
3. Right-click the first row and select Cell > Cell Properties and change the Cell Type to Header and click OK
4. Type in your text for the header and the body copy in the field below
5. To check that the accordion works, preview the page in Desktop mode (using the eye icon at top right)
6. Your accordion will appear on the page collapsed, click it to exand and view the data cell

When to use Accordions?

You can use an accordion for the following:

• Frequently Asked Questions
• To reduce text size and adding read more for the audience to read more
• For Fees pages, instead of using normal tables to display complex information
• To provide your audience with a better digital experience

Please note:  Accordions work best on Interior Content pages and may not work on experience pages. 

Discover more