Accordions

Accordions can be used when you have multiple chunks of content that are related to each other that would create a very long page if displayed in a single block of text. They are useful because they allow your users to quickly find the content they are looking for without having to scroll a long way or scan too many words, which is especially relevant on mobile devices.

• Accordions can only appear in the main column. They cannot be used in the right hand column or within tabs.
• Multiple groups of accordions can be used on the same page broken up by other templates. 
• It is not possible to add any other templates inside accordion panes.
• It is not possible to link to specific accordions from other pages.

We suggest:

• You should have at least 2 accordions on a page and no more than 15.
• The titles of your accordion boxes should contain no more than 7 words so that they are easy to scan and are less likely to wrap on to two or more lines on mobile devices.
• Accordion titles should have helpful headings that indicate to your users what they will find when opening an accordion pane.
• The content of the accordion panes should be a maximum of 300 words. Any more and consider splitting into more accordions.
• Please do not insert images. 

To set up accordions on a page you will need to use three types of template:

• Accordion header code - This indicates the starting point of a group of accordions in T4
• Accordion pane - This contains the heading and content for each accordion pane. You will need to add this template multiple times; one for each accordion pane
• Accordion footer code - This indicates the end of a group of accordions in T4

1. Add the 'Accordion header code' template to your page.

• Name the template 'Accordion header - [0]' - The number here should be the same as the Accordion ID (see below)
• Select an Accordion ID number from the drop-down. The Accordion ID number is used to differentiate groups of accordions on a single page, so it needs to be unique to each group of accordions

2. Add 'Accordion pane' templates

You will need to add an Accordion pane for each accordion.

• Name the template 'Accordion - [Pane title]'
• Add a 'Pane title' for this accordion (this appears in the coloured bar at the head of the accordion on the live site)
• Add your 'Pane content' text
• Make sure that the 'Accordion ID' number matches that of the 'Accordion header code' that you would like this accordion to appear in
• Add a 'Pane ID'. Ensure that all accordion panes on any page have unique ID numbers and are not duplicated

3. Add the 'Accordion footer code' template

• Name the template 'Accordion footer - [0]' - The number here should be the same as the Accordion header code ID

The order that accordions appear on the live site is determined by the order they appear in the content tab of their T4 section, not the Pane ID. To change the order navigate to the section and use the up and and down arrows in the 'Move' column, don't forget to click 'Save Changes' when you are happy with the order.