Description
An accordion is a vertically stacked list of text headers that can be expanded one at a time to reveal more information. This tool is especially useful for organizing complex or lengthy information into manageable sections, improving user experience by keeping the page clean and navigable. Within the body text for each list item, full WYSIWYG text and media formatting is supported, including CTA buttons if desired.
Jump to Examples
Training Video
Parameters
Required fields
- Accordion List Items: Minimum of 2 list items
- Accordion Title: This is the label for each expandable list item
- Text: This is the expanded area within each list item
Recommended character limits
- Accordion Section Title: Maximum of 50 characters
- Accordion Text Area: Maximum of 220 characters
- Accordion Title: Maximum of 40 characters
- Subtitle: Maximum of 40 characters
- Accordion Links: Maximum of 25 characters for the Link Text
Use Cases
Accordions can save space on a page when providing additional information that only some site visitors may be interested in, such as details for how to visit campus on the Visit page.
Accordion With Intro Text
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisi etiam dignissim diam quis enim. Tincidunt praesent semper feugiat nibh. Diam volutpat commodo sed egestas egestas. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Dictum sit amet justo donec enim diam vulputate. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Morbi blandit cursus risus at. Tristique senectus et netus et. Egestas diam in arcu cursus euismod quis viverra nibh. Neque viverra justo nec ultrices dui sapien.
Lorem Ipsum Dolar
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisi etiam dignissim diam quis enim. Tincidunt praesent semper feugiat nibh. Diam volutpat commodo sed egestas egestas. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Dictum sit amet justo donec enim diam vulputate. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Morbi blandit cursus risus at. Tristique senectus et netus et. Egestas diam in arcu cursus euismod quis viverra nibh. Neque viverra justo nec ultrices dui sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisi etiam dignissim diam quis enim. Tincidunt praesent semper feugiat nibh. Diam volutpat commodo sed egestas egestas. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Dictum sit amet justo donec enim diam vulputate. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Morbi blandit cursus risus at. Tristique senectus et netus et. Egestas diam in arcu cursus euismod quis viverra nibh. Neque viverra justo nec ultrices dui sapien.
| Lorem | Lorem | Lorem | Lorem | Lorem | Lorem |
| 1 | 2 | 3 | 4 | 5 | 6 |
| 2 | 3 | 4 | 5 | 6 | 7 |
| 3 | 4 | 5 | 6 | 7 | 8 |
| 4 | 5 | 6 | 7 | 8 | 9 |
| 5 | 6 | 7 | 8 | 9 | 10 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisi etiam dignissim diam quis enim. Tincidunt praesent semper feugiat nibh. Diam volutpat commodo sed egestas egestas. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Dictum sit amet justo donec enim diam vulputate. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Morbi blandit cursus risus at. Tristique senectus et netus et. Egestas diam in arcu cursus euismod quis viverra nibh. Neque viverra justo nec ultrices dui sapien.
Accordion Without Intro Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisi etiam dignissim diam quis enim. Tincidunt praesent semper feugiat nibh. Diam volutpat commodo sed egestas egestas. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Dictum sit amet justo donec enim diam vulputate. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Morbi blandit cursus risus at. Tristique senectus et netus et. Egestas diam in arcu cursus euismod quis viverra nibh. Neque viverra justo nec ultrices dui sapien.
Lorem Ipsum Dolar
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisi etiam dignissim diam quis enim. Tincidunt praesent semper feugiat nibh. Diam volutpat commodo sed egestas egestas. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Dictum sit amet justo donec enim diam vulputate. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Morbi blandit cursus risus at. Tristique senectus et netus et. Egestas diam in arcu cursus euismod quis viverra nibh. Neque viverra justo nec ultrices dui sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisi etiam dignissim diam quis enim. Tincidunt praesent semper feugiat nibh. Diam volutpat commodo sed egestas egestas. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Dictum sit amet justo donec enim diam vulputate. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Morbi blandit cursus risus at. Tristique senectus et netus et. Egestas diam in arcu cursus euismod quis viverra nibh. Neque viverra justo nec ultrices dui sapien.
| Lorem | Lorem | Lorem | Lorem | Lorem | Lorem |
| 1 | 2 | 3 | 4 | 5 | 6 |
| 2 | 3 | 4 | 5 | 6 | 7 |
| 3 | 4 | 5 | 6 | 7 | 8 |
| 4 | 5 | 6 | 7 | 8 | 9 |
| 5 | 6 | 7 | 8 | 9 | 10 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisi etiam dignissim diam quis enim. Tincidunt praesent semper feugiat nibh. Diam volutpat commodo sed egestas egestas. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Dictum sit amet justo donec enim diam vulputate. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Morbi blandit cursus risus at. Tristique senectus et netus et. Egestas diam in arcu cursus euismod quis viverra nibh. Neque viverra justo nec ultrices dui sapien.
Accordion Title
Lorem ipsum dolar
Accordion Title
Optional intro text
Lorem ipsum