User Guide Accordions, Expanders, & Tabs

Overview

Accordions, Expanders, and Tabs are three separate tools that function similarly in the Sidebar, but look different on the page.

Use these three tools to:

Create expanding panel groups in which one or more panels can open at a time
Create quick references like FAQ or resources
Build interactive content

Related Tools:

Video Guide

Interface

The following panels will describe what can be accomplished in each section of this tool:

Content

The following controls are available in the Content section:

1. Panels

The number of panels in the panel group. Increasing or decreasing this number will add or remove panels from the bottom of the group.

2. + Panel

Add a single panel to the bottom of the group.

3. Heading Level (H2, H3, H4, H5, H6)

Set the heading level at which each of the panels should be set.

4. Panel Controls

This section allows you to perform the following actions for panels within the panel group:

Rearrange the items by either dragging the item up or down or by using the keyboard arrow keys when keyboard focus is on the drag handles.
Set which panels are active and will be open by default.
Change the heading text for a given panel.
Duplicate a specific panel.
Remove a given panel.

Style

Use the tools in the Style section to:

1. Widget Type: Select from different styles of accordions, expanders or tabs to change the type and style of the current panel group.
2. Default Color: Set the default color for when panels are closed.
3. Active Color: Set the default color for when panels are open.
4. Hover Color: Set the default color for when panels are hovered over or have keyboard focus.
5. Heading Text: Determine the text alignment for your panel titles.
6. Tab Controls: (Tabs only) Determine the alignment of the tabs themselves.
7. Tab Width: (Tabs only) Set the width of your tabs. Default will conform to the amount of text in each panel title. Fill Screen Width will expand the tab widths to split the available width of the screen, and will adjust them proportionately based on the length of the panel titles. Equal will make all tabs uniform, regardless of the length of the panel titles.

Advanced

The Advanced panel provides the following options:

Add Nested Panel Group: This will allow you to nest a panel group inside of another panel group. Due to usability and accessibility considerations, you can only nest one level deep.

Quick Styles

Use the Quick Styles panel to access styles built and managed by the Style Editor and the Quick Style Manager.

Preview

The Preview section gives you an interactive view of the rendered panel group.

Instructions

Add Panel Group (Accordion/Expander/Tabs)

Show Me HowTo add a new panel group:

Place your cursor in the editor, where you want the item to appear.
Select the Add tab.
Choose the Accordion, Expander or Tabs tool.
In the Content panel, increase the number of panels in the Panels input or click the + Panel button.

Add Panel to Existing Group

Show Me HowTo add a panel to an existing group:

Place your cursor within the desired group.
Make sure you are in the Edit Current Element tab.
Choose the Accordion, Expander or Tabs option as the active tool.
In the Content panel, increase the number of panels in the Panels input or click the + Panel button.

Rearrange Panels

To rearrange panels within the group:

Place your cursor within the desired group.
Make sure you are in the Edit Current Element tab.
Choose the Accordion, Expander or Tabs option as the active tool.
In the Content panel, use your mouse to drag and drop to change the panel order.
Or, tab to select the reorder handles and use your keyboard arrow keys to move the selected panel up or down.

Delete a Panel

To delete a panel from an existing group:

Place your cursor within the desired group.
Make sure you are in the Edit Current Element tab.
Choose the Accordion, Expander or Tabs option as the active tool.
In the Content panel, click the Delete Item button next to the desired panel.

Change Panel Group Type

To change the type of panel group:

Place your cursor within the desired group.
Make sure you are in the Edit Current Element tab.
Choose the Accordion, Expander or Tabs option as the active tool.
In the Style panel, select the desired panel type.

Change Colors

To change the colors for panel headings:

Place your cursor within the desired group.
Make sure you are in the Edit Current Element tab.
Choose the Accordion, Expander or Tabs option as the active tool.
In the Style panel, use the color picker buttons to choose the desired color.

The following list explains the different color types:

Default Color: Set the default background color for when panels are closed
Active Color: Set the default background color for when panels are open
Hover Color: Set the default background color for when panels are hovered over or have keyboard focus.

Nest a Panel Group Inside Another Group

To nest a panel group inside an existing panel group:

Place your cursor at the location where you want the nested group to reside.
Make sure you are in the Edit Current Element tab.
Choose the Accordion, Expander or Tabs option as the active tool.
In the Advanced panel, click the +Nest Panel Group button

A note about nesting

Due to usability and accessibility considerations, the tools will only allow you to nest one group of panels inside another.

Resources

Examples

Accordion

Accordions are vertically aligned and only allow one panel to be open at a time. This Examples panel is part of an accordion

Expander

Expanders are like accordions but allow multiple panels to be open at the same time. The Interface block on this page uses an Expander.

Tabs

Tabs include a horizontal or vertical list of controls to open one panel at a time. This group of explanations is organized in tabs.

Design Considerations

Please consider the following when choosing to use panel groups:

These are for quick reference from a list of items. As such:
- The should not be used to hold large amounts of sequential content. If it is multiple pages worth of content, use multiple Canvas pages instead of putting it all in one panel.
- If students have to read chronologically through every panel, consider organizing the content a different way.
Content inside a panel should be short enough that limited or no scrolling is required to read the content.
Use sparingly, a little bit can go a long way. We even worried that the pages in this user guide used too many panels but decided it was the best way to organize the information.
You can apply styles from the Style Editor to an entire panel; however, the tab panels are contained in a wrapper that will not allow for styles to expand past the border (such as box shadows). If you'd like a tab panel to have a box shadow, you will need to apply 10px of padding to the tabs panel wrapper div as well. This provides the space needed to make the shadow visible.

Legacy Comparison

While the option to add Accordions, Expanders and Tabs was available in the legacy version of the Design Tools sidebar. This version adds the following features:

The ability to change colors
A variety of different styles
Updated code to match the latest WAI-ARIA pattern suggestions
Structural changes to help address common issues that can occur when copying and pasting content into panels.