Accordion

Use this guide to add and edit the accordion component.

The accordion allows you to organise large amounts of content into easier to view sections that can be expanded or collapsed as necessary.

Features

The component: 

• creates content sections grouped by headings
  
• allows you to reorder those sections
  
• can be used on homepage, content page, content landing page, news articles, events, and the contact page.

Before you start

Navigate to the page where you want to add or edit a column component and you are ready to begin.

• Select Accordion from the Insert New Component list.

Step 2: Edit the accordion component

• Select the Accordion component.
• Select the spanner icon to edit the accordion. This is the Configure button. 

Step 3: Name your accordion and add content items

• Give your accordion a title and add as many accordion sections (items) as you need. At this step, you are only adding and naming the sections
  
• You can reorder or remove sections if you need to
• You can also choose whether to allow multiple items to be open at the same time. If not, one item will open and others will close.
  
• Select the tick at the top-right corner of the accordion box. 

Step 4: Add, copy or move components within the accordion

Option 1: Add component

• Select the Drag components here within the accordion.
• Select the Plus icon.

• Select a component from the Insert New Component list.

Option 2: Copy and paste component

• Select the component you want to copy.
• Select the duplicate pages icon to copy the component. It is next to the spanner icon.

• Select the Drag components here within a column.
• Select the clipboard icon. This is the Paste button.
• A copy of the component will appear. 

Option 3: Move component

• Select the component you want to move.
• Drag and drop the component into its new location within the accordion structure. Once you see a blue arrow appearing where you want it to move you can drop it. 

Example of a component inside the accordion:

Step 5: Adding, removing or changing the order of accordion sections

• Select the Accordion component.
• Select the spanner icon to edit the accordion. This is the Configure button.
• With the accordion options open, select the Trash bin icon to remove a section, or drag the arrow selection icon up or down to re-order the accordion sections
• Select the Add button to add additional sections to the accordion