Accordions

Audience: All editor roles

Please note, this product is in development and you may find videos and documentation don't reflect current functionality. 

Topic covers how to add and edit an accordion on a page.

The accordion component lets you show and hide sections of related content on a page. An accordion will usually start with all sections hidden. To show a section, the user can click anywhere on the title button.

Because accordions hide content, only use them when user research shows they help users navigate related content efficiently - never for essential information that all users must see. See when to use an accordion and the accessibility guidelines.

Timed transcript

• After opening a page, click the blue plus icon where you want the new accordion. Select ‘Accordion’ from the pop-up window.
• In the accordion window:
  • Set the accordion width.
  • Add an optional anchor link.
• Click 'Apply' to add the accordion to the page.

• Each accordion row has a title and a content area.
• To add a title, hover over the row and click the edit icon. Replace the placeholder text with a short but meaningful title.
• To add content, click the blue plus icon under the title and select 'Text'.
  • Add and edit your content in the new window.
  • On the 'Styles' tab, set the accordion width, optional anchor link, and column span.
  • Click 'Apply' to add the content to the accordion.
• Repeat this process for each accordion row.
• To add new rows, click 'Add Accordion Item'.
• After adding an accordion to a page, you can amend the content in the edit pane which automatically opens on the right-hand side of the screen.
• Any changes you make are immediately updated in the preview page to the left.
• Refer to the accessibility guidelines below for more information.

Use the toolbar to: 

Image

• Move the component up or down the page
• Edit the component settings
• Copy the component
• Save the component as a reusable template to use elsewhere on your site
• Delete the component from the page. 

Only use an accordion if there's evidence it's helpful for the user to:

• see an overview of multiple, related sections of content
• choose to show and hide sections that are relevant to them
• look across information that might otherwise be on different pages.

Accordions hide content from the user. Not all users will notice them or understand how they work. For this reason, you should only use them in specific situations and if user research supports it.

Do not use accordions for content that all users need to see.

• The accordion title is a Heading 3 (H3) heading so to make an accordion accessible, you must:
  • add an H2 heading before the accordion
  • create any headings within the accordion content as H4 headings.
• Write the accordion heading like any other button text. Use sentence case, describe the content that will show, and keep it short. Users of screen readers might find it difficult to navigate the accordion if the title text is too long.

0:01
In this video, you'll learn how to add and edit accordions in Fresco.

0:06
Accordions are a great way to organise your content on long pages, and they make it easier for users to scan and navigate a page. So let's get started.

0:16
After signing into Fresco, go to the 'Content' section. Find the page you want to edit and click the 'Edit' button to open a draft.

0:29
Locate the section you wish to edit and click the blue '+' icon where you want the accordion to appear.

0:38
In the pop-up window, select 'Accordion'.

0:43
Please note, not all of these components will be available to you immediately.

0:50
In the 'Create New Accordion' window, you can set the accordion width from the drop-down menu, add an optional anchor link and then click 'Apply' to insert the accordion on your page.

1:06
Each accordion row has a title,

1:09
This is what the users click on to open the accordion, and a content area.

1:14
This is the text that appears in the accordion.

1:18
To edit, hover over the row and click the pencil icon to add the title.

1:27
Replace the placeholder text with a short but meaningful title.

1:31
Make sure to use clear language that will make sense to your users out of context.

1:38
Next, place your cursor in the box under the title and click the blue '+' icon.

1:47
Select 'Text' from the pop-up window. Then add your accordion content in the new window.

1:58
Use the WYSIWYG toolbar to format your text.

2:02
If you need more advice about how to do this, visit the Fresco help site.

2:07
In the 'Styles' tab, you can adjust the accordion width,

2:12
Add an optional anchor link, and choose how many columns you want the accordion to span.

2:20
Click 'Apply' when you are done. You will see the accordion content on the page.

2:29
To add more rows, click the 'Add Accordion Item' button.

2:36
Add a title and content for each new accordion row you add.

2:41
At any stage, you can reorder the rows by dragging and dropping them into position.

2:50
You can delete a row by clicking its title and clicking the bin icon. On the accordion toolbar,

3:01
You also have the ability to copy the accordion, or to save the accordion to use as a reusable template elsewhere on your site, or to delete the entire accordion using the bin icon.

3:16
This toolbar functionality is covered elsewhere on our Fresco help site.

3:23
When you're done editing, click 'Save' and then click 'Exit Editing'.

3:28
And that's it! You've successfully added and edited an accordion in Fresco.

3:36
You can find more detailed information about accordions on the Fresco Help site.

Back to top