Accordion component and Accordion assemblies

Accordions are ideal for content such as FAQs – longer text that you can hide under topic headers. They are created using both Component – Accordion and Assembly – Accordion.

• Build each individual accordion component

• Add them into an accordion assembly

• Add the assembly to a page.

You can also embed an accordion component directly into the rich text editor of some page templates.

Accordion component

1. Use Add entry and select Accordion component

2. Add your Title (only seen in Contentful) and Heading (seen by users) in the entry editor

3. Add your Content in the rich text editor (RTE). If you’re cut-and-pasting text, use Ctrl+Shift+V and make sure you remove any previous formatting.

You then have a full range of text formatting options: Normal text style and heading styles H3 to H5, bold, italic, bulleted/numbered lists, hyperlinks, quote block and divider line.

4. Publish your component

Time-saver: If you’re creating a number of accordion components to be used in an accordion assembly, duplicate the first one after publishing. Click the 3 dots upper right and select Duplicate. Then rename your fields.

Accordion assembly

 Once you’ve built and published your components, bring them into an assembly to be used in a page.

1. Use Add entry to select Assembly - Accordion

2. Title - the name of the assembly in Contentful

3. Heading - this will appear above the accordions (optional)

4. Use Link existing entries to find and add the accordion components you’ve created

5. To change the order of your accordions, click & drag a block by its left edge

6. When you’ve added all accordions and are happy with their order, click Publish

You can then add the published assembly to one or more pages. Example: https://england.shelter.org.uk/support_us/events/organise_own_event/plan_a_successful_fundraising_event

Any questions? Email Lindsay Foley in the Central Digital team.