Skip to content
Anchor Theme
Component Guide

Accordions

Back to Components Overview

The Accordion component allows you to present information within collapsible containers. This is especially useful for FAQs or long pages where users can toggle section visibility making it easier for them to find what they need quickly.

This component offers several configuration options, divided into the following categories:

Settings This section contains general settings that apply to all components across the system. These include:

  • Hide on Mobile/Tablet/Desktop: Pick whether to hide, or show this component independently on mobile, tablet, and desktop resolutions via a set of three checkboxes.
  • Desktop/Mobile Padding: Configure top and bottom padding for both desktop and mobile views.
  • Section Background Colour: Choose from a list of pre-configured brand colours for the background.
  • Section Width: Determine the maximum width for the component’s content. You can select from four options, ranging from full container width to half-width.
Animation Here, you can choose how the accordion will appear when the page loads. There are seven animation options available:

  • None
  • Slide in from the top
  • Slide in from the bottom
  • Slide in from the left
  • Slide in from the right
  • Fade in
  • Grow in
Pod Styling This section allows administrators to style individual accordion sections (or “pods”). Options include:

  • Accordion Background Colour: Choose the background colour for each accordion from a pre-configured list of brand colours.
  • Accordion Title Colour: Set the text colour for each accordion’s title, again from a list of brand colours.
  • Accordion Title Style: Choose the heading size for each title, ranging from Heading 1 to Small Paragraph.
  • Accordion Content Colour: Set the text colour for the accordion’s content section, with options drawn from brand colours.
  • First Accordion Opened: A checkbox to set whether the first accordion should be expanded by default when the page loads. By default, all accordions are collapsed.
Content This section allows you to add, remove, or reorder accordion rows within the component.

To Add an Accordion Row

Click the ‘Add Item’ button at the bottom-right of the component. This will insert a new accordion row at the bottom of the list.

Two input fields (for ‘Question’ and ‘Answer’) will be provided for each row, which will serve as the title and content of the accordion.

To Remove an Accordion Row

Hover over the row you wish to remove and click the (-) button that appears on the far right. A confirmation prompt will appear to ensure you want to delete the row.

To Reorder an Accordion Row

To move an accordion, hover over the left side of the row (above the number). When the cursor changes to a crosshair, drag and drop the row into the desired position.

 

You can see various examples of the Accordion component, with different styles and animations here.