Accordion content type - click to open
Use this to have a section hidden on page load. You can have formatted text within this accordion: including links and images.
Heading 2 for example
with a list of links
and a table
| Column heading 1 | Column heading 2 | Column heading 3 |
|---|---|---|
| Content in here. Content in here. Content in here. Content in here. | Content in here. Content in here. | Content in here. |
| Content in here. | Content in here. Content in here. | Content in here. |
| Content in here. Content in here. | Content in here. | Content in here. Content in here. Content in here. Content in here. |
Accordion 2 - blue background colour
You can have as many of these as neccessary. Images should be a maximum of 500px wide.
Accordion 3 - open by default
This accordion is set to 'open by default'
When to use it
Accordions are useful when:
- users only need a few pieces of information on a page
- the main task is a logical, step-by-step process
- information in each accordion is independent, and users will not need to have several accordions open
- content is long and window size is small
For example, a page may give an overview of a course. You could keep extra details of the course in an accordion for people who need it, without cluttering the page for people who do not.
When not to use it
Resist the urge to put FAQs in accordions. This is combining one unfriendly content pattern (FAQs) with hidden potentially useful content.
Don't fill a page with accordions. Accordions make more work for people looking for content. It's easier for users to seek information by scrolling through headings than it is for them to open and close multiple accordions.
Guidelines
- Use accordions to show optional extra information, for example, extra detail that will not be relevant to all users. Don't put information that all users will need to read in an accordion.
- Accordion labels should be clear and concise. A user should know what to expect before they click on an accordion heading. Keep the label short and put the most important information first, to help users scanning the page.
- Keep text within an accordion brief - no more than a few sentences. If you find you need to include more text than this, consider how you're structuring information: this text may be better as a separate page.