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
-
Use Add entry and select Accordion component
-
Add your Title (only seen in Contentful) and Heading (seen by users) in the entry editor
-
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.
-
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.
-
Use Add entry to select Assembly - Accordion
-
Title - the name of the assembly in Contentful
-
Heading - this will appear above the accordions (optional)
-
Use Link existing entries to find and add the accordion components you’ve created
-
To change the order of your accordions, click & drag a block by its left edge
-
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.