Accordion
The accordion component is an expandable component used to control the display of information. It's often used to help maintain a clear and concise experience. Accordions help users focus and find the information they need more quickly. This component works well when vertical space is limited.
When to use
- Use accordions when you want to give users the ability to hide content to better focus on a task
- Use when vertical space is limited and long content cannot be displayed at once
- User to shorten a page and reduce scrolling and it’s not crucial to read content in full
When not to use
- Use accordions sparingly and consider the usability impacts that "hiding content" from the user may have
- Avoid nesting accordions within accordions
- Avoid using tables within accordions
Anatomy
- Icon: option to include 48 x 48px icon
- Title: contains the required section header and acts as a control to expand and collapse the accordion and should not contain footnotes with tooltips
- Summary: option to include a brief sentence as a teaser to the body content and should not contain footnotes with tooltips
- Header area with chevron: acts as the control and indicator for collapsing and expanding the accordion
- Body: flexible content area associated with the accordion title
Demos & variations
Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut nulla magna. Etiam molestie turpis eu dui tincidunt, non pellentesque ante iaculis. Cras commodo nisi metus, non imperdiet neque feugiat egestas. Morbi fringilla, leo non mattis ullamcorper, diam neque volutpat lorem, ultricies sagittis turpis velit a nibh. Donec ultrices viverra nulla quis pellentesque. Quisque vel blandit nisl. Mauris ac ornare ligula, non elementum felis. Donec rutrum, ipsum pharetra ornare dapibus, libero velit aliquam ipsum, a finibus mi nulla at velit. Quisque fringilla leo sit amet est laoreet venenatis. Donec ullamcorper quis velit eget suscipit. Integer non nibh in metus accumsan feugiat. Maecenas a est eget odio semper gravida.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut nulla magna. Etiam molestie turpis eu dui tincidunt, non pellentesque ante iaculis. Cras commodo nisi metus, non imperdiet neque feugiat egestas. Morbi fringilla, leo non mattis ullamcorper, diam neque volutpat lorem, ultricies sagittis turpis velit a nibh. Donec ultrices viverra nulla quis pellentesque. Quisque vel blandit nisl. Mauris ac ornare ligula, non elementum felis. Donec rutrum, ipsum pharetra ornare dapibus, libero velit aliquam ipsum, a finibus mi nulla at velit. Quisque fringilla leo sit amet est laoreet venenatis. Donec ullamcorper quis velit eget suscipit. Integer non nibh in metus accumsan feugiat. Maecenas a est eget odio semper gravida.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut nulla magna. Etiam molestie turpis eu dui tincidunt, non pellentesque ante iaculis. Cras commodo nisi metus, non imperdiet neque feugiat egestas. Morbi fringilla, leo non mattis ullamcorper, diam neque volutpat lorem, ultricies sagittis turpis velit a nibh. Donec ultrices viverra nulla quis pellentesque. Quisque vel blandit nisl. Mauris ac ornare ligula, non elementum felis. Donec rutrum, ipsum pharetra ornare dapibus, libero velit aliquam ipsum, a finibus mi nulla at velit. Quisque fringilla leo sit amet est laoreet venenatis. Donec ullamcorper quis velit eget suscipit. Integer non nibh in metus accumsan feugiat. Maecenas a est eget odio semper gravida.
First accordion open by default
The user should be in control of when accordions are expanded or collapsed and have the ability to open all accordions or collapse all accordions. There is a setting available to have the first accordion in a group open on page load when needed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut nulla magna. Etiam molestie turpis eu dui tincidunt, non pellentesque ante iaculis. Cras commodo nisi metus, non imperdiet neque feugiat egestas. Morbi fringilla, leo non mattis ullamcorper, diam neque volutpat lorem, ultricies sagittis turpis velit a nibh. Donec ultrices viverra nulla quis pellentesque. Quisque vel blandit nisl. Mauris ac ornare ligula, non elementum felis. Donec rutrum, ipsum pharetra ornare dapibus, libero velit aliquam ipsum, a finibus mi nulla at velit. Quisque fringilla leo sit amet est laoreet venenatis. Donec ullamcorper quis velit eget suscipit. Integer non nibh in metus accumsan feugiat. Maecenas a est eget odio semper gravida.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut nulla magna. Etiam molestie turpis eu dui tincidunt, non pellentesque ante iaculis. Cras commodo nisi metus, non imperdiet neque feugiat egestas. Morbi fringilla, leo non mattis ullamcorper, diam neque volutpat lorem, ultricies sagittis turpis velit a nibh. Donec ultrices viverra nulla quis pellentesque. Quisque vel blandit nisl. Mauris ac ornare ligula, non elementum felis. Donec rutrum, ipsum pharetra ornare dapibus, libero velit aliquam ipsum, a finibus mi nulla at velit. Quisque fringilla leo sit amet est laoreet venenatis. Donec ullamcorper quis velit eget suscipit. Integer non nibh in metus accumsan feugiat. Maecenas a est eget odio semper gravida.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut nulla magna. Etiam molestie turpis eu dui tincidunt, non pellentesque ante iaculis. Cras commodo nisi metus, non imperdiet neque feugiat egestas. Morbi fringilla, leo non mattis ullamcorper, diam neque volutpat lorem, ultricies sagittis turpis velit a nibh. Donec ultrices viverra nulla quis pellentesque. Quisque vel blandit nisl. Mauris ac ornare ligula, non elementum felis. Donec rutrum, ipsum pharetra ornare dapibus, libero velit aliquam ipsum, a finibus mi nulla at velit. Quisque fringilla leo sit amet est laoreet venenatis. Donec ullamcorper quis velit eget suscipit. Integer non nibh in metus accumsan feugiat. Maecenas a est eget odio semper gravida.
With icon only
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut nulla magna. Etiam molestie turpis eu dui tincidunt, non pellentesque ante iaculis. Cras commodo nisi metus, non imperdiet neque feugiat egestas. Morbi fringilla, leo non mattis ullamcorper, diam neque volutpat lorem, ultricies sagittis turpis velit a nibh. Donec ultrices viverra nulla quis pellentesque. Quisque vel blandit nisl. Mauris ac ornare ligula, non elementum felis. Donec rutrum, ipsum pharetra ornare dapibus, libero velit aliquam ipsum, a finibus mi nulla at velit. Quisque fringilla leo sit amet est laoreet venenatis. Donec ullamcorper quis velit eget suscipit. Integer non nibh in metus accumsan feugiat. Maecenas a est eget odio semper gravida.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut nulla magna. Etiam molestie turpis eu dui tincidunt, non pellentesque ante iaculis. Cras commodo nisi metus, non imperdiet neque feugiat egestas. Morbi fringilla, leo non mattis ullamcorper, diam neque volutpat lorem, ultricies sagittis turpis velit a nibh. Donec ultrices viverra nulla quis pellentesque. Quisque vel blandit nisl. Mauris ac ornare ligula, non elementum felis. Donec rutrum, ipsum pharetra ornare dapibus, libero velit aliquam ipsum, a finibus mi nulla at velit. Quisque fringilla leo sit amet est laoreet venenatis. Donec ullamcorper quis velit eget suscipit. Integer non nibh in metus accumsan feugiat. Maecenas a est eget odio semper gravida.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut nulla magna. Etiam molestie turpis eu dui tincidunt, non pellentesque ante iaculis. Cras commodo nisi metus, non imperdiet neque feugiat egestas. Morbi fringilla, leo non mattis ullamcorper, diam neque volutpat lorem, ultricies sagittis turpis velit a nibh. Donec ultrices viverra nulla quis pellentesque. Quisque vel blandit nisl. Mauris ac ornare ligula, non elementum felis. Donec rutrum, ipsum pharetra ornare dapibus, libero velit aliquam ipsum, a finibus mi nulla at velit. Quisque fringilla leo sit amet est laoreet venenatis. Donec ullamcorper quis velit eget suscipit. Integer non nibh in metus accumsan feugiat. Maecenas a est eget odio semper gravida.
With summary only
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut nulla magna. Etiam molestie turpis eu dui tincidunt, non pellentesque ante iaculis. Cras commodo nisi metus, non imperdiet neque feugiat egestas. Morbi fringilla, leo non mattis ullamcorper, diam neque volutpat lorem, ultricies sagittis turpis velit a nibh. Donec ultrices viverra nulla quis pellentesque. Quisque vel blandit nisl. Mauris ac ornare ligula, non elementum felis. Donec rutrum, ipsum pharetra ornare dapibus, libero velit aliquam ipsum, a finibus mi nulla at velit. Quisque fringilla leo sit amet est laoreet venenatis. Donec ullamcorper quis velit eget suscipit. Integer non nibh in metus accumsan feugiat. Maecenas a est eget odio semper gravida.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut nulla magna. Etiam molestie turpis eu dui tincidunt, non pellentesque ante iaculis. Cras commodo nisi metus, non imperdiet neque feugiat egestas. Morbi fringilla, leo non mattis ullamcorper, diam neque volutpat lorem, ultricies sagittis turpis velit a nibh. Donec ultrices viverra nulla quis pellentesque. Quisque vel blandit nisl. Mauris ac ornare ligula, non elementum felis. Donec rutrum, ipsum pharetra ornare dapibus, libero velit aliquam ipsum, a finibus mi nulla at velit. Quisque fringilla leo sit amet est laoreet venenatis. Donec ullamcorper quis velit eget suscipit. Integer non nibh in metus accumsan feugiat. Maecenas a est eget odio semper gravida.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut nulla magna. Etiam molestie turpis eu dui tincidunt, non pellentesque ante iaculis. Cras commodo nisi metus, non imperdiet neque feugiat egestas. Morbi fringilla, leo non mattis ullamcorper, diam neque volutpat lorem, ultricies sagittis turpis velit a nibh. Donec ultrices viverra nulla quis pellentesque. Quisque vel blandit nisl. Mauris ac ornare ligula, non elementum felis. Donec rutrum, ipsum pharetra ornare dapibus, libero velit aliquam ipsum, a finibus mi nulla at velit. Quisque fringilla leo sit amet est laoreet venenatis. Donec ullamcorper quis velit eget suscipit. Integer non nibh in metus accumsan feugiat. Maecenas a est eget odio semper gravida.
With icon and summary
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut nulla magna. Etiam molestie turpis eu dui tincidunt, non pellentesque ante iaculis. Cras commodo nisi metus, non imperdiet neque feugiat egestas. Morbi fringilla, leo non mattis ullamcorper, diam neque volutpat lorem, ultricies sagittis turpis velit a nibh. Donec ultrices viverra nulla quis pellentesque. Quisque vel blandit nisl. Mauris ac ornare ligula, non elementum felis. Donec rutrum, ipsum pharetra ornare dapibus, libero velit aliquam ipsum, a finibus mi nulla at velit. Quisque fringilla leo sit amet est laoreet venenatis. Donec ullamcorper quis velit eget suscipit. Integer non nibh in metus accumsan feugiat. Maecenas a est eget odio semper gravida.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut nulla magna. Etiam molestie turpis eu dui tincidunt, non pellentesque ante iaculis. Cras commodo nisi metus, non imperdiet neque feugiat egestas. Morbi fringilla, leo non mattis ullamcorper, diam neque volutpat lorem, ultricies sagittis turpis velit a nibh. Donec ultrices viverra nulla quis pellentesque. Quisque vel blandit nisl. Mauris ac ornare ligula, non elementum felis. Donec rutrum, ipsum pharetra ornare dapibus, libero velit aliquam ipsum, a finibus mi nulla at velit. Quisque fringilla leo sit amet est laoreet venenatis. Donec ullamcorper quis velit eget suscipit. Integer non nibh in metus accumsan feugiat. Maecenas a est eget odio semper gravida.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut nulla magna. Etiam molestie turpis eu dui tincidunt, non pellentesque ante iaculis. Cras commodo nisi metus, non imperdiet neque feugiat egestas. Morbi fringilla, leo non mattis ullamcorper, diam neque volutpat lorem, ultricies sagittis turpis velit a nibh. Donec ultrices viverra nulla quis pellentesque. Quisque vel blandit nisl. Mauris ac ornare ligula, non elementum felis. Donec rutrum, ipsum pharetra ornare dapibus, libero velit aliquam ipsum, a finibus mi nulla at velit. Quisque fringilla leo sit amet est laoreet venenatis. Donec ullamcorper quis velit eget suscipit. Integer non nibh in metus accumsan feugiat. Maecenas a est eget odio semper gravida.
Behaviors
Mouse
Users can expand or collapse the accordion by clicking on the chevron or anywhere in the header area.
Keyboard
Users can navigate between accordion headers by pressing Tab or Shift-Tab. Users can expand or collapse an accordion by pressing Enter or Space while the header area has focus.
Content
- Limit the title and summary in the accordion header to no more than 3-4 lines across devices
- If footnotes are needed ensure that they are non-interactive and don’t include a tooltip by using the class <sup class=”non-tooltip”>