DesignPLUS Accordions, Expanders, and Tabs

You can use the DesignPLUS Sidebar to add accordions, expanders, and tabs layouts to your course. Some use examples include (but are not limited to):

  • Chunk content: Keep page lengths short and manageable for you and your students.
  • Organize FAQs: Create interactive Frequently Asked Questions sections.
  • List steps: Break down detailed instructions for graded assignments.

Adding an Accordion, Expander, or Tabs to a Content Page

While editing content in your Canvas course, launch the DesignPLUS Sidebar by clicking on the 🚀 rocket ship icon at the top right corner of the screen.

  • Alternatively, press Alt/Option + Shift + D on your keyboard.

Place your cursor in the RCE (Rich Content Editor) where you want to add the accordion, expander, or tabs interface.

In the DesignPLUS Sidebar, click on the ➕ Add New Elements tab.

Click the Accordion, Expander, or Tabs button (found under the Page Layout, Interactive, or Recently Used Tools headings).

  • Alternatively, use the Search textbox to search for Accordion, Expander, or Tabs. DesignPLUS will show results in real-time. Click the ✖️ icon to clear your search.
This is a screenshot of the DesignPLUS sidebar, showing the "Add New Elements" panel. A dark purple arrow at the top points to the active plus sign icon tab. Below that, another arrow points to the "Search" text field. A third arrow at the bottom points to the "Accordion" button within the "Recently Used Tools" section.

After clicking on the Accordion, Expander, or Tabs button, that interface will be added to the RCE.

  • While editing your content page, the accordion, expander, or tab interface may not look exactly like what you and your students will see after the page is saved. This is by design.

To edit names of the panel headings (Example: Panel 1, Panel 2), refer to the section on Content Panel in this guide.

To edit the content within each panel (Example: Panel 1 Content, Panel 2 Content), place your cursor in those areas within the RCE, and make edits as needed.

A screenshot of the Canvas Rich Content Editor displaying two newly inserted DesignPLUS Accordion panels. The panels are stacked vertically within the editor, each outlined by a blue dashed border with a small blue "Panel" badge in the top right corner. The first panel contains a grey header titled "Panel 1", a subheading labeled "Heading", and placeholder body text reading "Panel 1 Content." The second panel below it is similarly structured with a grey header titled "Panel 2", a subheading labeled "Content.", and placeholder body text reading "Panel 1 Content."

Design Assistant Panel

The Design Assistant is currently a beta tool in the DesignPLUS Sidebar. It uses AI (Artificial Intelligence) to generate content that can be inserted into accordions, expanders, and tabs layouts.

After adding an accordion, expander, or tabs layout to your content page, if you do not see the Design Assistant panel within the DesignPLUS Sidebar, you will need to enable beta tools in your Sidebar.

These two side-by-side screenshots are taken from the DesignPLUS Accordion Builder section of the Design Assistant. However, the Expander Builder and Tabs Builder interfaces are nearly identical.

In the Design Assistant panel, enter a topic or passage from which to create accordion, expander, or tabs panels.

  • Click the Generate button to generate panel content.
  • Click the History button to see previous AI-generated content that is date and time stamped.
  • Click the Options button to see additional options: Replace content in the editor, Number of panels, Grade level, Output language, and Organize by.
A screenshot of the Design Assistant Beta panel for the Accordion Builder within the Cidi Labs DesignPLUS Sidebar. The interface features an "AI Transparency" link in the upper right and a main text box prompting users to "Enter a topic or passage from which to create panels." Below the text box are three primary buttons labeled "Generate," "History," and "Options," followed by a checkbox to "Replace content in the editor." The bottom section contains configuration settings for the AI output, including a number input for "Number of panels" currently set to 4, and dropdown menus for "Grade level" set to 13, "Output language" set to English, and "Organize by" set to Chronologically.
A screenshot of the Accordion Builder interface within the Design Assistant Beta panel. The main text input area contains a passage discussing the unique bamboo diet of pandas, starting with "A Unique Diet: Despite being classified as carnivores...". Below the input field are buttons for Generate, History, and Options, followed by an unchecked checkbox located next to "Replace content in the editor". The bottom section displays configuration options where "Number of panels" is set to 4, "Grade level" is set to 13, "Output language" is set to English, and the "Organize by" dropdown is set to Thematically.

The Design Assistant will display AI-generated content based on the content provided and options selected. Place a ☑️ checkmark next to those items you wish to include in your accordion, expander, or tabs layout. Place a ☑️ checkmark next to Select all from this response to include all AI-generated content in the layout.

A screenshot displaying the generated results within the Design Assistant Accordion Builder. At the top, a badge reads "Here is the response:" above a scrollable window containing the AI-generated content. Inside the window, there is a heading titled "Unique Diet of Pandas" followed by a short paragraph explaining their bamboo consumption. Large purple arrows point to two specific checkboxes: one located directly to the left of the generated panda paragraph, and another located at the very bottom of the interface labeled "Select all from this response."

Click the Add Sections button to add the AI-generated content in an accordion, expander, or tabs layout within the RCE.

If you need to further refine your content, use the Refine results textbox to provide more details, and then click the ✨ Refine button.

The Design Assistant panel interface featuring an informational alert box at the top stating, "Design Assistant content is generated by AI. It should be reviewed for accuracy and edited as needed." Below the alert are two buttons: a blue "+ Add Sections" button and a white "Start Over" button with a refresh icon. The bottom section is labeled "Refine results" and contains a text input field with the placeholder text "What would you like to change?", followed by a dark blue "Refine" button with sparkle icons and a gray "Options" dropdown button.

After clicking on the Add Sections button, the AI-generated content will be added to the RCE.

A screenshot of the Canvas Rich Content Editor displaying a populated DesignPLUS Accordion block. The accordion consists of two main panels, indicated by dashed borders and structural labels for "Panel," "Heading," and "Content." The first panel features the heading "Unique Diet of Pandas" with a corresponding paragraph explaining that pandas primarily eat bamboo to meet their energy needs. The second panel features the heading "Special Adaptations: The False Thumb" with a paragraph detailing how their enlarged wrist bone helps them grasp bamboo. A scrollbar on the right and a partially visible third panel at the bottom suggest there is more content below.

When the content page is saved, the accordion or expander layout may look similar to below screenshot.

A screenshot of a Canvas content page displaying a four-panel accordion widget about pandas. The top panel, with the dark header "Unique Diet of Pandas," is expanded, revealing a paragraph of text explaining that despite being carnivores, their diet is 99% bamboo requiring massive daily consumption. Below this are three collapsed panels with grey headers and upward-pointing arrows indicating they can be opened: "Special Adaptations: The False Thumb," "Daily Routine and Energy Conservation," and "Panda Growth and Waste Production."

The Tabs interface may look similar to the below screenshot. Depending on your selections, tabs will appear either above or to the left of the content.

A tabbed information panel from a Canvas course page. There are three horizontal tabs: 'Introduction to Pandas', 'Panda Habitat and Behavior', and 'Panda Conservation Efforts'. The 'Introduction to Pandas' tab is currently active. The panel below displays the introductory text: 'Pandas are large, black-and-white bears native to China. They are known for their gentle nature and distinctive appearance. Pandas mainly eat bamboo, which makes up most of their diet.'

Content Panel

The Content panel allows you to edit certain properties of your accordion, expander, or tabs layout.

  1. Panels: Increase or decrease the number of accordion, expander, or tabs panels using the ➕ / ➖ buttons.
  2. ➕Panel: Add an additional accordion, expander, or tabs panel.
  3. Heading Level: Change the heading level.
  4. Move: Click and drag the six vertical dots to move a panel item up/down.
  5. ✔️ Check: Set a panel to open by default.
  6. Text: Update the panel name text, or click the ✖️ icon to clear the text completely.
  7. Duplicate: Make a copy of a given panel.
  8. 🗑️ Delete: Remove a panel (and the content within it) from your accordion, expander, or tabs.
A screenshot of the "Content" panel within the DesignPLUS Accordion tool, annotated with yellow alphabetical labels pointing to specific interface controls. Label A indicates a number input field for the total panels, currently set to 4. Label B points to a "+ Panel" button, and Label C highlights a row of heading level options with "H3" selected. Below these top controls are four rows representing the individual accordion panels. On the first panel's row, Label D points to a drag handle for reordering, Label E points to a checkmark button, Label F points to the text input field containing the panel title "Unique Diet of Pandas", Label G points to a duplicate icon, and Label H points to a red trash can delete icon.

Style Panel

The Style panel allows you to choose from a handful of styles for your accordion, expander, or tabs layout.

Click on the tabs below to learn more about each type.

Accordions
Expanders
Tabs
A screenshot of the Style panel for the Tabs tool within the DesignPLUS Sidebar, displaying a grid of layout options. A light purple overlay highlights a group of seven tab styles across the middle and bottom rows to indicate their location within the grid. Below the style options are customization buttons for Default Color, Active, and Hover states, followed by Heading Text alignment icons, Heading Padding numbered buttons from 1 to 5, and a checkbox at the bottom labeled "Use default heading font size for panels."
  • Basic Tabs
  • Underlined Tabs
  • Pill Tabs
  • Button Tabs
  • Pill Tabs Vertical
  • Pill Tabs Vertical Outlined
  • Button Tabs Vertical

Using a tabs interface on a Canvas page is one of the most effective ways to organize content and improve the student experience. From an instructional design perspective, tabs are excellent for “chunking” information, which prevents the dreaded “wall of text” and reduces cognitive load.

  • Organizing Content by Format: Grouping different types of learning materials so students can easily find what they need. For example, you might use tabs labeled Readings, Lectures, and Supplemental Resources.
  • Sequencing Steps in an Assignment: Breaking down a large, complex project into manageable phases. Your tabs could be labeled Step 1: Brainstorm, Step 2: Rough Draft, and Step 3: Final Submission.
  • Providing Differentiated Instruction: Offering alternative learning paths or technical instructions based on student needs. You might have tabs for Beginner Concepts and Advanced Deep Dives, or Mac Instructions and Windows Instructions.

Advanced Panel

The Advanced panel includes a few additional options:

  • ➕ Nested Panel Group: Add additional accordions, expanders, or tabs inside existing accordions, expanders, or tabs. Take care when using this option, as nesting content within content can get messy. Due to accessibility considerations, you may only nest panel groups one level deep.
  • Unwrap Panels: Unwraps the accordion, expander, or tabs interface.
  • Add active dates to panels (MM/DD/YYYY): Adds dates to your accordion, expander, or tabs layout in the RCE. Set the start and end dates that you want the panels to open/close automatically.
A screenshot of the "Advanced" panel within the DesignPLUS Sidebar. It contains a button labeled "+ Nested Panel Group" and another labeled "Unwrap Panels". Below the buttons is a checkbox labeled "Add active dates to panels (MM/DD/YYYY)".

Additional Resources

Accordions, Expanders, & Tabs

Accordions, Expanders, & Tabs: [New] DesignPLUS User Guide