Website Support
Virtual Visit Request info Apply
MENUMENU
  • Resources
    • Publishing Help
      • Style Guide Index
      • Keyboard Shortcuts
      • Shortcodes
      • Web Writing Guide
    • Roles
      • Overview of Roles
      • Unit Web Coordinator
      • Site Steward
    • Policies & Procedures
  • Training
    • Training
      • How to become a WordPress user
      • Request a Sandbox Site
      • Sandbox requirements
      • Training schedule
    • Additional Training Opportunities
      • Siteimprove
      • UX/UI
  • About
    • News
    • Contact Us
  • FAQs
  • Submit a Support Request
  • IN
  • Web
  • Accordions

Academic unit site support

Digital Marketing Support 928-523-1741

Business unit site support

ServiceNow 928-523-1511

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 Tab Open

  • How-To Tab Closed

  • Troubleshooting Tab Closed

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.

  1. Select accordions shortcode. The shortcode appears in the text editor.
  2. Insert your cursor between the shortcode bookends.
  3. Enter Heading 4 (H4) text for the accordion label or title.
  4. 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.

Website support
Location
Building 54
Information Technology Services
1301 S. Knoles Drive
Flagstaff, AZ 86011
Mailing Address
PO Box 5100
Flagstaff, AZ 86011
Contact Form
Email
ask-its@nau.edu
Phone
928-523-3335