Accordion
Accordions are helpful for pages where a person needs to scan a number of (more than 8) headings and choosing a single item to get information. If there is a need to directly link to this one item or for someone to print a single item, an accordion is not helpful. Accordions may shorten pages and reduce scrolling, but they increase the time and effort spent by requiring people to select various topic headings in order to locate the information they need.
Accordions should be treated as a last resort, if and only if the content meets ALL of the following criteria.
- The list has more than five to eight items on it.
- The user would be scanning the list for one, at max two, items.
- Opening the accordion reveals the content of 1-2 paragraphs, no more.
- The content in the accordions does not need to be linked to (no deep-linking).
If there are more than five to eight headings, consider using a table of contents that anchors/links to each heading.
Having all the content on the screen provides a better user experience, allowing users to:
- reference multiple pieces of information at once
- utilize the CTRL+F find on the page
- scan headings
- determine if they are on the right page without having to take any action (click).
-
Component configuration
Page field Data modular-accordion-1
{ "id":000000, "heading":"Accordion" }
-
Promotion group details
Available fields Title Text on the closed accordion. Description Content when the accordion is clicked open.
My accordion
-
Rerum veniam molestias nihil dolor.
A blanditiis animi quasi. Voluptas ratione ea doloremque est deserunt laudantium. Pariatur voluptas dignissimos voluptatum incidunt enim quia. Example link.
-
Voluptatem labore sunt ullam.
Vero blanditiis non temporibus dignissimos. Est iusto sunt laboriosam magni illo facilis. Impedit porro quo quis itaque accusamus alias corporis a. Rerum fugit iusto et commodi inventore. Minima eveniet nulla eligendi. Example link.
-
Tempora facilis cumque quidem nemo iusto blanditiis.
Id quo qui dolorem et ad rerum. Repudiandae fuga rerum perspiciatis vitae rerum assumenda hic est. Et molestiae dolorem harum in commodi officiis. Quidem impedit excepturi amet ipsam nostrum. Example link.
-
Perspiciatis rerum officia sed corporis.
Quia eaque suscipit quidem ipsum perspiciatis. Cum labore qui sit maiores. Non necessitatibus sed quos et. Example link.
My second accordion
-
Officia saepe maxime nisi pariatur et distinctio fuga.
Earum consequuntur aut numquam quas consequuntur quibusdam libero. Ad praesentium odio unde omnis distinctio tempora autem. Example link.
-
Pariatur aperiam quia consequatur et aut debitis voluptatibus.
Ducimus quis sit suscipit quasi. Ipsam expedita dolore at labore deleniti dicta repellendus. Quas dolorem repellat architecto sit amet sed ut molestiae. Example link.
-
Quod iure et sit molestiae aut.
Atque cum eum sed. Est cupiditate et in voluptate. Veniam eum ut itaque. Example link.