Accordion
Accordion
Lorem ipsum dolor sit amet consectetur adipiscing elit donec risus fermentum, nullam in iaculis semper per turpis montes augue morbi. Penatibus arcu magna placerat laoreet purus hac dis pretium, euismod interdum sapien conubia mus fringilla dictumst libero vel, urna
An accordion is a component consisting of a vertically stacked list of headers that can be clicked to expand and reveal the content within them.
Accordions are a useful way to use progressive disclosure for content-heavy pages, allowing users to have control over content by expanding it, deferring it for later, or skipping it altogether. The component helps people quickly scan what content is available on the page so they can choose to engage with what's relevant to them.
Collapsing the page by using accordions helps minimize scrolling, clearly presents the page's messaging hierarchy (even serving as a mini-IA), and helps prevent users navigating off the page.
Ensure you use accordions appropriately as sometimes long-form content warrants use of multiple separate pages. Accordions should be avoided when your audience needs most or all of the content on the page to answer their questions. It is better to show all page content at once when a use case supports it. In such cases, don’t worry too much about page length. Relevance trumps page length.
Save people the hassle of clicking on links needlessly if their intention is to consume all of the content in the same session. As long as the content on a page is related, relevant, and formatted properly for the web, people will eagerly scroll the page.
Accordions are suitable when people need only a few key pieces of content on a single page. By hiding most of the content, users can spend their time more efficiently focused on the few topics that matter, for example, FAQs pages.
Make sure to write meaningful and concise headlines that clearly indicate what the user will find after expanding each individual section. Try to keep the number of sections limited: a good rule of thumb is fewer than seven. Define a title and description for the group of accordion items to provide context, if appropriate.
Content elements:
- Group title—optional, header that will be used to introduce a group of items
- Row title—required if component is used, recommended character limit is 65
- Item content—WYSIWYG editor
- Accordion item is a repeater item with no minimum, but refer to best practices guidelines to determine an appropriate quantity