Component — Accordion Set / Accordions

The "Accordion Set" component is a little different from the other components in that it is a container for another component called "Accordion". Adding an "Accordion Set" will allow you to add a number of individual "Accordion" components.

» View an example of Accordions

Creating an Accordion Set

Choose “Accordion Set” as your Page Component Type and then click on the button labeled “Add new Page Component”. Note that if you already have some component on your page, the button will read “Add another Page Component”.

An Accordion Set will be created for you — this will act as a container to hold your individual accordions in.

Adding Accordions to the Set

To add your first accordion, click on the button labeled “Add New Accordion” — for each additional accordion the button will be labeled “Add Another Accordion”.

Once you accordion has been created, you will need to complete two fields for each accordion:

Accordion Title — this will be the text that appears on the accordion bar and will act as a header for the content contained in the accordion. This should be short and clearly understood. People will need to click/touch this title to open or close the accordion and interact with the information contained.

Accordion Content — each accordion will have it’s own WYSIWYG block of content, this is similar to what you would find in the Basic Page content type or in the WYSIWYG Text component. I won’t repeat the details here, you can refer to the other documents if required.

The one difference to note here is that the accordions are nested inside of the title element and have a small amount of padding on the left and right side. This makes the overall width of the content area smaller than normal.

Reordering Accordions

Once you have created more than on accordion, you will have the option to change the order in which they are displayed on the page. You can use the drag-handle () on the top left of each accordion to reorder the accordions the way you would like them. Please make sure you save your page after reordering.

Best Practices for Using Accordions

…coming