Accordions allow content owners to add more content to the page, while keeping the length of the page short and reducing scrolling for the user. When used effectively, accordions allow users to get the big picture before diving into more specific content.
On the flip side, accordions also hide content and can frustrate users by requiring additional clicks.
Each page should have no more than one accordion that is six levels or less deep. If accordions get deeper than that, the content for the page is likely too broad.
Use an accordion if users should pick and choose content. If only a few visitors need certain sections of content, accordions are perfect.
Do not use an accordion if the majority of visitors would read most or all of the content on your page to answer their questions.
Tips for accordions:
- Write clear headers. These determine whether or not visitors click to explore more content. Confusing or misleading headlines can be frustrating.
- Put valuable information in each section. Visitors expect to be rewarded with content every step of the way. If the information isn’t answering a question they would have, it shouldn’t be on our site.
- Do not put multiple links in an accordion. Users should never be asked to click twice for the same information.
- Keep accordions limited to six levels. If there are more levels, search engines don’t know what’s important, and the content will be ranked poorly.
- Audiences stop reading if there’s too much to choose from. Keep the focus so the audience can, too.
- Make sure images are sized correctly. If images are too big, the audience will get frustrated and move on.
Accordion Example
Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis quam venenatis, blandit nisl vel, lacinia lorem. Sed rutrum ante sem, eu eleifend lectus interdum in. In sed elit non elit accumsan convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas tincidunt diam justo, sit amet condimentum elit dapibus ut. Suspendisse ornare dolor eget metus eleifend feugiat. Quisque id turpis leo. Fusce accumsan justo a libero semper dapibus. Proin vel aliquet metus, eu viverra justo. Aliquam massa massa, tristique sit amet ex in, auctor imperdiet nisi. Vivamus ultrices scelerisque ultrices. Sed aliquet elit et urna tincidunt consectetur.
Vestibulum ut nunc et ligula luctus vehicula. Nunc lobortis, ligula ut rhoncus luctus, orci ligula aliquet tellus, id pulvinar dolor tortor quis massa. Cras ullamcorper erat dolor, vel vestibulum tortor placerat ac. Donec egestas massa at porta laoreet. Proin auctor purus eget cursus lacinia. Morbi nunc magna, cursus at eros sit amet, interdum suscipit metus. Donec posuere eu justo ac lobortis. Nunc porta ante in ligula rhoncus, non hendrerit turpis fringilla. Duis cursus ex in justo maximus euismod. Phasellus metus libero, lacinia a dignissim id, gravida consectetur sem. In vel velit justo. In ac ipsum erat. Nam vel facilisis nisi. Suspendisse et sodales metus.
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis quam venenatis, blandit nisl vel, lacinia lorem. Sed rutrum ante sem, eu eleifend lectus interdum in. In sed elit non elit accumsan convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas tincidunt diam justo, sit amet condimentum elit dapibus ut. Suspendisse ornare dolor eget metus eleifend feugiat. Quisque id turpis leo. Fusce accumsan justo a libero semper dapibus. Proin vel aliquet metus, eu viverra justo. Aliquam massa massa, tristique sit amet ex in, auctor imperdiet nisi. Vivamus ultrices scelerisque ultrices. Sed aliquet elit et urna tincidunt consectetur.
Vestibulum ut nunc et ligula luctus vehicula. Nunc lobortis, ligula ut rhoncus luctus, orci ligula aliquet tellus, id pulvinar dolor tortor quis massa. Cras ullamcorper erat dolor, vel vestibulum tortor placerat ac. Donec egestas massa at porta laoreet. Proin auctor purus eget cursus lacinia. Morbi nunc magna, cursus at eros sit amet, interdum suscipit metus. Donec posuere eu justo ac lobortis. Nunc porta ante in ligula rhoncus, non hendrerit turpis fringilla. Duis cursus ex in justo maximus euismod. Phasellus metus libero, lacinia a dignissim id, gravida consectetur sem. In vel velit justo. In ac ipsum erat. Nam vel facilisis nisi. Suspendisse et sodales metus.
Heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis quam venenatis, blandit nisl vel, lacinia lorem. Sed rutrum ante sem, eu eleifend lectus interdum in. In sed elit non elit accumsan convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas tincidunt diam justo, sit amet condimentum elit dapibus ut. Suspendisse ornare dolor eget metus eleifend feugiat. Quisque id turpis leo. Fusce accumsan justo a libero semper dapibus. Proin vel aliquet metus, eu viverra justo. Aliquam massa massa, tristique sit amet ex in, auctor imperdiet nisi. Vivamus ultrices scelerisque ultrices. Sed aliquet elit et urna tincidunt consectetur.
Vestibulum ut nunc et ligula luctus vehicula. Nunc lobortis, ligula ut rhoncus luctus, orci ligula aliquet tellus, id pulvinar dolor tortor quis massa. Cras ullamcorper erat dolor, vel vestibulum tortor placerat ac. Donec egestas massa at porta laoreet. Proin auctor purus eget cursus lacinia. Morbi nunc magna, cursus at eros sit amet, interdum suscipit metus. Donec posuere eu justo ac lobortis. Nunc porta ante in ligula rhoncus, non hendrerit turpis fringilla. Duis cursus ex in justo maximus euismod. Phasellus metus libero, lacinia a dignissim id, gravida consectetur sem. In vel velit justo. In ac ipsum erat. Nam vel facilisis nisi. Suspendisse et sodales metus.
Heading 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis quam venenatis, blandit nisl vel, lacinia lorem. Sed rutrum ante sem, eu eleifend lectus interdum in. In sed elit non elit accumsan convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas tincidunt diam justo, sit amet condimentum elit dapibus ut. Suspendisse ornare dolor eget metus eleifend feugiat. Quisque id turpis leo. Fusce accumsan justo a libero semper dapibus. Proin vel aliquet metus, eu viverra justo. Aliquam massa massa, tristique sit amet ex in, auctor imperdiet nisi. Vivamus ultrices scelerisque ultrices. Sed aliquet elit et urna tincidunt consectetur.
Vestibulum ut nunc et ligula luctus vehicula. Nunc lobortis, ligula ut rhoncus luctus, orci ligula aliquet tellus, id pulvinar dolor tortor quis massa. Cras ullamcorper erat dolor, vel vestibulum tortor placerat ac. Donec egestas massa at porta laoreet. Proin auctor purus eget cursus lacinia. Morbi nunc magna, cursus at eros sit amet, interdum suscipit metus. Donec posuere eu justo ac lobortis. Nunc porta ante in ligula rhoncus, non hendrerit turpis fringilla. Duis cursus ex in justo maximus euismod. Phasellus metus libero, lacinia a dignissim id, gravida consectetur sem. In vel velit justo. In ac ipsum erat. Nam vel facilisis nisi. Suspendisse et sodales metus.