Accordion Item

The accordion component can be used to display a group of content, with multiple sections. The content in these should not be the main body of copy, which is better placed in text block with clear headings. An example use for this component would be FAQ’s where the hide reveal design works well, or the display of module content, where a user can choose to show only information relevant to them.

Key features

• Each item has a label, which when clicked on by the user will reveal the content
• Optional title and intro, this should only be used on the first item of an accordion
• Consecutive accordion items will automatically be wrapped into an accordion
• If requiring multiple accordions in a section separate by using the title element or a different content type
• NB tables are not suitable for adding to an accordion item and must be used within a text block.

Examples

• Accordion
• With title and intro
• Multiple accordions