Accordion
The accordion component creates a list of headers that hide or reveal content when a header in the list is clicked.
Examples
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat tellus a dignissim blandit. Praesent interdum neque in aliquam condimentum. Quisque elementum vehicula pretium. Suspendisse id condimentum erat. Quisque malesuada mi sed tincidunt sodales. Morbi viverra, nibh aliquet accumsan maximus, arcu diam suscipit lorem, vel elementum neque quam et mi. Etiam a ipsum libero. Phasellus lobortis velit eu consectetur varius. Nullam sed placerat elit. Quisque convallis odio nec efficitur laoreet. Nullam in justo ut nulla congue porttitor. Ut neque quam, lobortis vel lorem a, accumsan consequat neque. Ut varius vestibulum nibh, in pulvinar nibh tincidunt eget.
Ut at elit sed nulla facilisis vulputate vitae nec massa. Suspendisse eu justo sed leo condimentum tincidunt vel ac justo. Sed nulla libero, semper id porttitor eget, maximus in ex. Morbi a ligula vel elit lacinia rutrum. Nulla sagittis augue id tempor aliquam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse fringilla orci dignissim lectus tempus bibendum. Duis sit amet sodales nunc. Donec in erat tempor, tristique enim nec, consequat ipsum. Pellentesque ut elit nisl. Etiam in dignissim risus. Suspendisse et tellus mauris. Maecenas vitae porta tellus.
Pellentesque porttitor, leo vel laoreet suscipit, tortor ligula lacinia lacus, in eleifend enim nisl vitae est. Nam condimentum ipsum sit amet nibh convallis hendrerit. Nam elit risus, sodales tempor pharetra non, accumsan non neque. Vivamus tortor nunc, viverra et est non, hendrerit ultrices nisi. Cras dignissim porta ligula, et lacinia orci efficitur eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut ante nunc.
Code reference
When to use
Accordions allow content managers to place large amounts of copy into a relatively small space on the page. Accordions are best used to help people find specific topics within a large amount of content. Accordions are a good choice when:
- You have lengthy content that needs to be displayed in a small space.
- The content is better visually represented in collapsible categories for easy navigation.
- The content is not vital to all audiences, or users only need a few specific pieces of content within a page.
Your accordion section topics should be unified under the single theme of the page, but distinct enough to be worthy of their own separate sections. Readers shouldn’t need information from one accordion section to make sense of other sections.
Since accordions are designed to "hide" content, you should not use them if visitors need to see most or all of the information on a page, or there is not enough content to warrant condensing.
When creating accordions, avoid:
- Lengthy headers: For a better user experience, do not let text wrap more than two lines when viewed on mobile devices.
- Lengthy content: This will often make the opening/closing animation of an accordion panel erratic.
- Media-heavy content: Images and videos are best displayed as a block element within the page to avoid formatting/performance issues.
How to use
- Access t4.vcu.edu and navigate to the page you would like to update.
- Use the T4 content type "Plugin - Accordion Panel."
- Enter content into the required name, heading and content elements.
- To have the accordion open when users access the page, check "True" under "Open by default?" Otherwise, the accordion will be closed by default.
Tips
- Accordions default to a closed state. Each time a web page is loaded, the accordion will appear closed. To set any accordion to a default open state, set the "Open by default?" option in T4 to true.
- Linking to an accordion panel by its ID will open it when scrolled to, closing all sibling panels within the accordion.
- Accordions are keyboard accessible and align with WCAG accessibility guidelines.
Requirements
All accordions require:
- A name (will only be visible in T4)
- A heading (this is what users will see)
- Some content inside the WYSIWYG editor (this displays when the accordion is open)
Accessibility considerations
Each accordion header must have a unique title that clearly describes the accordion panel content. This is particularly helpful for users of assistive technologies so they have the necessary information to efficiently navigate the content without having to expand every section.