Accordion
The accordion component is a group of collapsable panels that hide or reveal their content when its header is clicked. When an accordion panel heading is clicked, all other accordion panels that are expanded will collapse. The accordion can be used with a single collapsible panel or multiple. When more than one collapsible panel is used within an accordion, a toggle button is added, allowing users to expand/collapse all accordion panels at once.
Markup
Whether you are using an accordion with a single panel or multiple, ensure that all panels are wrapped in a div.cwf-accordion__wrapper element. Each individual panel will have a div.cwf-accordion__panel element.
If you are using this component with a group of accordions ensure you are rendering the "Expand All / Collapse All" toggle button with a class of .cwf-accordion__toggle.
Javascript
Each accordion panel heading is listening for click events or keydown events when focused.
The following events will trigger the panel to expand or collapse:
- A click
- Pressing the "Space" key
- Pressing the "Enter" key
The following keydown events will change panel heading focus:
- Up arrow - Moves focus to the previous panel's heading, unless on the first panel which will focus the last panel's heading
- Down arrow - Moves focus to the next panel's heading, unless on the last panel which will focus the first panel's heading
- "Home" key - Focuses the first panel's heading
- "End" key - Focuses the last panel's heading
Examples
Single
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet risus suscipit sapien congue pretium. In hac habitasse platea dictumst. Donec vel nisi quis dui aliquam porta. Sed nec dolor ullamcorper velit suscipit elementum. Suspendisse et augue vitae tellus congue mollis. Integer sem ex, rhoncus eget cursus non, rhoncus eget ipsum. Praesent ullamcorper facilisis diam, sit amet commodo sem auctor egestas. Virginia Commonwealth University Vivamus vestibulum, ligula vitae molestie finibus, est lacus ornare nisl, quis ultrices massa mi vitae augue. Pellentesque nulla lectus, placerat id tellus ac, fringilla aliquam velit. Aliquam ullamcorper consectetur urna, vitae maximus nunc malesuada eget. Vestibulum lobortis ut quam a congue. Phasellus facilisis erat at feugiat faucibus. Curabitur cursus dolor in laoreet sodales.
Group
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet risus suscipit sapien congue pretium. In hac habitasse platea dictumst. Donec vel nisi quis dui aliquam porta. Sed nec dolor ullamcorper velit suscipit elementum. Suspendisse et augue vitae tellus congue mollis. Integer sem ex, rhoncus eget cursus non, rhoncus eget ipsum. Praesent ullamcorper facilisis diam, sit amet commodo sem auctor egestas. Virginia Commonwealth University Vivamus vestibulum, ligula vitae molestie finibus, est lacus ornare nisl, quis ultrices massa mi vitae augue. Pellentesque nulla lectus, placerat id tellus ac, fringilla aliquam velit. Aliquam ullamcorper consectetur urna, vitae maximus nunc malesuada eget. Vestibulum lobortis ut quam a congue. Phasellus facilisis erat at feugiat faucibus. Curabitur cursus dolor in laoreet sodales.
Nulla efficitur dui risus, et venenatis lacus commodo a. Nullam leo odio, posuere vitae erat eu, iaculis vulputate magna. Donec posuere elit eget lectus fermentum euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam blandit augue ut nulla dictum, placerat vehicula mi pulvinar. Maecenas in quam est. Integer nec ultricies purus, malesuada accumsan neque. Maecenas mauris ligula, lobortis et congue nec, condimentum eget eros. Vivamus pharetra rutrum tellus, sit amet molestie lorem pellentesque et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam pretium nibh ac est dapibus porta eu sollicitudin odio. Nunc sed risus faucibus, commodo eros iaculis, volutpat diam. Mauris mattis velit augue, id tincidunt leo rhoncus non.
Proin ex enim, elementum vitae ipsum vel, congue molestie mauris. Vestibulum consequat scelerisque commodo. In malesuada tincidunt finibus. Donec efficitur, quam et interdum aliquet, nisl sapien sagittis ex, nec luctus est risus eget mauris. Etiam porttitor, magna at sollicitudin facilisis, metus ipsum commodo arcu, vitae tristique lorem quam eget neque. Aliquam rhoncus bibendum est, vel accumsan leo molestie efficitur. Sed nec pretium elit, a vestibulum magna.