Guidance notes
Here are some written instructions on how to add an accordion, or if you prefer, there is a video guide at the bottom of this page. You can expand the screenshots by clicking on them. Tips are given in italics.
These notes assume you are already logged into the CMS.
- Click on ‘Edit Mode’ in the top left of the toolbar
- Then left click on 'Add Content'
- Select ‘Single Accordion’ from the list of block types.
You can use the search box to easily find the block you are looking for.
- Add your Heading (title) to the accordion, along with your content, before selecting save and continue.
- Repeat this process for as many accordions as you would like. As with 'normal' content areas, there are several types of content you can add into accordions using the WYSIWYG editor - including images, links, videos, Google maps and tables.
Usually the Semantic Title for the accordion should be set as Heading 2. However, note if you have already used a heading on the page. For example, if the accordion appears underneath a Heading 2 and it is a sub-paragraph to that section, you need to change the Semantic Title to Heading 3. If an accordion's main heading style is 'Heading 3', any headings within the accordion itself must be styled using 'Heading 4' and so on. This is for accessibility compliance.
For more information review our accessible content guide here.
- You can reorder the accordions on the page by clicking on the 'move' icon in the top right hand corner of each accordion (looks like a cross). Each accordion can be dragged and dropped to reorder as shown below.
