Accordion
For use in main content areas; not for use in sidebars or narrow columns/grids
The Accordion widget can be used to organize and display a list of short-form content in horizontal or vertical formats. This widget is good for categories, glossaries, or any time users need information on a few key topics.
AccordionItem (vertical): items are stacked and expand vertically.
Accordion example
Accordion Heading
Example of an accordion.
Accordion Heading #2
Example of an accordion.
Accordion Heading #3
Example of an accordion.
Visual demo
Widget standards
A layout is needed for this widget.
Do:
- Use this widget to guide users to additional information or details.
- Use this widget judiciously.
- Use 3-5 tabs or accordions per set.
Do NOT:
- Add images or videos to tabs.
- Use this widget to "hide" important content, try to satisfy a desire for "movement," or to make long, scroll-intensive pages seem otherwise.
Written instructions
1. A layout is needed. Click "Layout".
2. Select the tab-accordion-layout.
3. Click "Content".
4. Click "Accordion". Add three to five Accordions, stacking each widget immediately below each other.
5. Click "Create content".
6. Template: Select based on the display option you want.
AccordionItem: Used for stacked Accordions.
7. Heading: Enter heading text. Recommendation: Max 75 characters.
8. Enter text to be housed within Accordion.
Alert! Optional buttons: Skip to Step 13 if you are not linking from your accordion.
9. Link text: Enter Call to Action text. Recommendation: 30 characters.
10. Link target:
Same window: For internal CMU pages.
New window: For links outside of cmich.edu.
11. Link ADA text: Enter your ADA text.
12. Choose your link.
Page within the site: This will take you to the page tree for selection.
External URL: Include full URL of links outside of cmich.edu.
13. Click "Save".
Save and send
- If you'd like to continue working on this page, but need to save your progress, click Save as Draft.
- If you're finished making changes to the page, and the page is ready for review, click Send for Approval.
