Accordions enable users to open and close sections of page content.
When to use an accordion component:
When not to use an accordion component:
Content creators should be able to decide if one or more of an accordion's sections are open in its default state. Note that a Show One Accordion could not have more than one section open, by default.
The arrow of an accordion section points toward the current location of that section's content. When the section is closed, the arrow points to the right to indicate that the content is hidden within the link/heading. When an accordion section is open, the arrow points down at the exposed content.
Users can select anywhere on the row of an accordion link/heading to toggle that section open and closed.
When the user selects a "Show More" link option, it retains its position at the end of the content that's revealed, and is replaced with "Show Less".
Title case, 2-3 words maximum.
Do not combine actions in a label (exception: "Customize & Buy").
If standard labels don't fit the button's purpose, align label with the task the user is attempting.
Please refer to the Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information regarding call-to-action labels and usage.
To be determined.
The A11Y Style Guide has excellent examples of markup for accordions.
The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.
Please follow the best practices for accordions (show/hide functionality) from WAI-ARIA authoring practices 1.1.
You may also refer to this example of an accordion from WAI-ARIA practices 1.1.