ºÚÁÏÍø

Accordions can be used to toggle the visibility of content. Here is a simple example of what accordions look like:

Issues With Accordions

While accordions can help organize content and save space, there are some important considerations to keep in mind:

1. Usability Concerns
   • Some visitors may not realize that they need to click on the accordion toggles to view the hidden content.
   • Users typically prefer to find information quickly and with minimal effort. Since accordions hide content, users may have to click through multiple toggles to locate the information they need.
2. Printing Limitations
   • When printing a webpage, only the content within open toggles will be printed.
   • If a visitor needs to print all the information inside an accordion, they must manually open each toggle and print the page multiple times—one for each toggle’s content.
3. Searchability Issues
   • If a visitor searches for a keyword on your webpage (e.g., using CTRL + F on Windows or Command + F on Mac), only the content within open toggles will be searchable.

How to Add Accordions

1. Place your cursor where you want the accordion to display on the page.
2. Select Accordion from the Content Elements dropdown menu under Interactive.
   • Tip: If you don’t see the Content Elements Plugin button, (as shown in the example above), click the Toolbar Toggle button. The Toolbar Toggle button shows and hides a collection of buttons in the editor.
3. After selecting Accordion from the Content Elements dropdown menu, a pop-up box will appear with the accordion settings.
   
4. Configure the Accordion Settings:
   1. Custom Class – Apply alternate accordion styles by adding the corresponding class name in this field. Refer to the Alternate Accordion Styles page for available designs and their class names.
   2. Color Settings – Keep the default values for Button Color, Button Hover Color, Text Color, and Text Hover Color.
   3. Heading Level – Choose the appropriate heading level for the accordion section titles. This is explained in detail below.
   4. Number of Sections – Specify how many toggles (accordion panels) should be created.
5. Shortcode will be added to the page that creates an accordion. The shortcode will look like this:[toggles class="yourcustomclass"] [toggle title="Accordion Number 1" class="in"]Toggle 1 Content Goes Here.[/toggle] [toggle title="Accordion Number 2"]Toggle 2 Content Goes Here.[/toggle] [toggle title="Accordion Number 3"]Toggle 3 Content Goes Here.[/toggle] [toggle title="Accordion Number 4"]Toggle 4 Content Goes Here.[/toggle] [/toggles]
6. The first toggle includes class=”in” in the shortcode. This keeps the first toggle open when the page loads. If you want all toggles to be closed by default, delete class=”in”.
7. Each toggle has placeholder text that needs to be replaced with your own content.
   1. Add a title to each toggle by replacing Accordion Number # in the shortcode. Don’t remove the quotes. Simply edit the content within the quotes.[toggle title="Accordion Number 2"]Toggle 2 Content Goes Here.[/toggle]
   2. Add content to each toggle by replacing Toggle # Content Goes Here. You can include text, images, links, headers, and more. [toggle title="Accordion Number 2"]Toggle 2 Content Goes Here.[/toggle]
8. After the shortcode has been generated, you can add or remove toggles as needed. Simply add or delete whole toggle sections.[toggle title="Accordion Number 2"]Toggle 2 Content Goes Here.[/toggle]

Choosing the Right Heading Level

When setting the Header Type for your accordion, it’s essential to choose the appropriate heading level to maintain proper document structure and ensure accessibility.

Headings provide structure to a webpage, helping users (including those using screen readers) navigate content more efficiently. Skipping heading levels or using them out of order can create confusion and make it difficult for assistive technologies to interpret the content correctly. As an added bonus, proper heading structure improves search engine optimization (SEO).

The Importance of Headers

Here’s a quick recap of why headings matter and best practices for using them effectively. More details can be found in our accessibility documentation on headers.

• Use headings for structure, not styling. Headings are used to separate content on a web page into meaningful sections. They give structure to a page and simplify page readability.
• Use Unique and Descriptive Headings. Ensure that headings are descriptive and relate to the content they introduce.
• Headings must follow a logical order to be compliant with web accessibility requirements. There are six different levels of headings: H1, H2, H3, H4, H5, H6. A Heading 1, or H1, is the largest and most important heading. An H6 is the smallest and least important heading.
• In the School of Medicine web system, page titles are automatically styled as an H1. This means that the first heading used in the main content should be an H2, followed by H3, H4, etc., in descending order.
• Do not skip heading levels. Headings should be used in descending order. For example, the first header used in the main content area should be an H2. If you wish to follow the H2 with a subheading, use an H3. If you wish to follow the H3 with a subheading, use an H4 and so on.

What Heading Level Should I Choose For An Accordion?

The heading level for each accordion toggle title should be determined based on the closest preceding heading on the page.

• If no heading precedes the accordion in the body content → Set the Heading Level to H2 (since the page title is an H1).
• If the accordion follows an existing heading → Set the Heading Level to the next appropriate level in the sequence.
  • Example: If the accordion follows an H2, set it to H3.
  • If it follows an H3, set it to H4, and so on.

By selecting the correct heading level, you ensure a logical content structure that improves readability, accessibility, and SEO.