Academic unit site support
Business unit site support
Accordions
Accordions are web design components that let you show headings while hiding blocks of related content. They are popular but often misused.
Watch the Accordions shortcode video
Overview Accordion Open
Consider using accordions when
- You have two or more closely related topics accompanied by a medium amount of detailed content.
- The content hidden in the accordion isn’t very short or very long.
Don’t use accordions when
- You only have a single topic and its related content to put into an accordion.
- The content you want to hide in an accordion is very short.
- The content you want to hide in an accordion is very long.
Alternatives to accordions
- The simplest option is to display all of your text and images on the web page.
- Another alternative is to use anchor links as a miniature table of contents on your page.
- Tabs suffer from many of the same problems as accordions, and they present even more accessibility challenges.
Example
Accordions don’t belong inside of tabs! Please see the example below (on the mobile view, you’ll need to scroll to the bottom of the content to see the examples).
How-To Accordion Closed
How to add accordions
Accordions can be attached to your page as a shortcode. The shortcode buttons appear at the top of the content editor window.
- Select accordions shortcode. The shortcode appears in the text editor.
- Insert your cursor between the shortcode bookends.
- Enter Heading 4 (H4) text for the accordion label or title.
- Insert text and or other elements for accordion content.
Troubleshooting Accordion Closed
Check the following list if your accordions are not appearing as intended:
- Ensure you created a new accordion for each one that you’d like to display
- Check that the accordion shortcodes aren’t nested – each must be discreet
- Ensure that the text for your shortcode is complete, all bookends are present, and each closing bookend contains a forward slash “/”
Example Kaltura shortcode embed
Example
Accordion 1 Accordion Closed
Here’s some information related to the heading used for Accordion 1.
Accordion 2 Accordion Closed
Here’s a topic that’s very closely related to Accordion 1, yet different enough to display as a strategic piece of information in its accordion.