User Guide Navigation

Advanced Elements Add Panels and Tabs

Descriptions and Examples

With the Panels tool, you can add panel widgets like accordion panels, expanders, or tabs.

Embedded Content Warning:

Almost anything that you can build inside of Canvas can be added into one of these widgets. However, there are exceptions which are typically tied to embedding external content through an LTI tool or any method that uses an iframe.

If you find something that doesn't work, send us a support ticket with the HTML you are using and we can take a look.

However, if the code involves an iframe, you will probably need to think of a method of making that content available that doesn't involve it being hidden from view.

Math Equations

We have also battled embedded math equations inside of these types of widgets. This is the type of issue that we can usually address unusual behaviors but there are so many variations in the ways that the equations are created that we continually have to fine tune the code. If you see odd behaviors with equations, please let us know and send us the HTML so we can take a look.

Accordion

An accordion is a series of vertical panels that can be expanded by clicking the title. The instructions below are an example of an accordion. With accordions, only one panel is open at a time. Accordions default with all panels closed but you can select any of the panels to be open by default when creating an accordion.

Accordion Panel 1

Accordion panel 1 contents. This panel can include just about anything.

Accordion Panel 2

Accordion panel 2 contents. This panel can include just about anything.

Expander

An expander is similar to an accordion, but multiple panels can be open at once. Expanders default with all panels closed but you can select as many of the panels to be open by default as you would like when creating an expander.

Expander Panel 1

Expander panel 1 contents. This panel can include just about anything.

Expander Panel 2

Expander panel 2 contents. This panel can include just about anything.

Tabs

Tabs are similar to accordions with only one panel visible at a time but titles appear in one row like folder tabs. With tabs, the first panel will default open but you can change the default when creating the tabs.

Tab Panel 1

Tap panel 1 contents. I default open. This panel can include just about anything.

Tab Panel 2

Tab panel 2 contents. This panel can include just about anything.

Turning on the Accordion | Tabs Tool

This is an Intermediate level Design Tool

To turn on this tool:

Click the Design Tools Settings icon in the Jump Menu
Do one of the following:
1. Choose Intermediate or Advanced from the Select a Comfort Level area
2. Manually turn on this tool by finding the Accordion | Tabs tool in the list and clicking the switch below the tool name
Close the Design Tools Settings

Interface

Add a new panel widget Controls to edit an existing panel widget

The following list describes tool options:

Add new: Create a new panel widget as a content block or at the cursor position.
Add new - As Block: Adds a panel as a content block. When you add a panel as a content block, you can reorder it on the page just like other content blocks.
Add new - At Cursor: Adds a panel at the cursor. When you add a panel at the cursor it is tied to that spot on the page and cannot be moved without changing the html code.
Type: Specifies the type of panel.
Add panel: Adds a new panel below the current panel in the selected panel widget.
Reorder panel: Moves the panel up or down in the display order.
Insert paragraph after: Inserts a blank paragraph after the panel widget.
Default open: Changes the default open behavior. The default behavior is to display the panels as initially closed. Enabling this option displays the panel as initially expanded.
Delete: Deletes the panel.

Instructions

Tip: If your cursor is in an existing panel widget in the content editor, you can click the button in the jump menu to jump right to the Accordions | Tabs section.

Add panel at cursor

To add a panel at the cursor, follow these steps:

In the Design Tools menu, click Add Advanced Elements.
In the Add Advanced Elements panel, click Accordions|Tabs.
On the content page, place the cursor where you want the panel to be added.
In the Accordion|Tabs panel, click Add at Cursor.
Select the panel type.
Type the panel heading and content.
On the content page, click Save.

Note/Caution: Using this method you can nest panel widgets inside other panel widgets. However, just because you can nest panels, it does not mean you should. Be kind to your students.

Add panel as a block

To add a panel as a block, follow these steps:

In the Design Tools menu, click Add Advanced Elements.
In the Add Advanced Elements panel, click Accordions|Tabs.
In the Accordion|Tabs panel, click Add Panel as block.
Select the panel type.
Type the panel heading and content.
On the content page, click Save.

Add panel

To add a panel, follow these steps:

In the Design Tools menu, click Add Advanced Elements.
In the Add Advanced Elements panel, click Accordions|Tabs.
On the content page, select the existing panel.
In the Accordion|Tabs panel, click Add Panel.
Select the panel type.
Type the panel heading and content.
On the content page, click Save.

Insert a paragraph after a panel

To insert a paragraph after a panel, follow these steps:

In the Design Tools menu, click Add Advanced Elements.
In the Add Advanced Elements panel, click Accordions|Tabs.
On the content page, select the panel.
In the Accordions|Tabs panel, click insert paragraph.
On the content page, click Save.

Reorder a panel

To reorder a panel, follow these steps:

In the Design Tools menu, click Add Advanced Elements.
In the Add Advanced Elements panel, click Accordions|Tabs.
On the content page, click the panel.
In the Accordions|Tabs panel, drag and drop the panel to the new position in the list.
Click Save.

Delete a panel

To delete a panel, follow these steps:

In the Design Tools menu, click Add Advanced Elements.
In the Add Advanced Elements panel, click Accordions|Tabs.
On the content page, select the panel.
In the list of panels, click the Delete button next to the panel.
On the content page, click Save.

Link to a specific panel Updated: 02/01/2022

With the various panel widgets, it is possible to create links that will open the page to a specific panel with that panel expanded.

For example, the following links will open this page to one of the example panel widgets at the top of this page:

Accordion Panel 1
Expander Panel 2
Tab Panel 2

To create a link to a specific panel:

Find the ID for the desired panel.
Each panel gets an ID (example: kl_panel_0, kl_panel_1, kl_panel_2, etc). One way that you can see this ID is when you hover your mouse over a panel heading, it will show up in the bottom left corner of your browser.
Create a link.
1. If the linked panel is inside the same page, you can just use the ID for the URL which is done by adding a # in front Create the link to the page and add that ID along with a # to the end of the url. For example, the url to this panel would be #kl_panel_12
2. If the linked panel is on another page, you add the ID to the end of the URL. https://cidilabs.instructure.com/courses/102/pages/add-accordion-panels-and-tabs#kl_panel_12

To create a link to an anchor inside a panel

If you want to direct the browser to a specific element inside that panel, you can target the desired element using its id attribute.

Make sure the target element has an id attribute (example: id="createdAnchor")
Specify the id of the element after the panel in the url using the # symbol followed by the id #createdAnchor. Example: #createdAnchor (same page) or https://cidilabs.instructure.com/courses/102/pages/add-accordion-panels-and-tabs#createdAnchor (if you want it on a different page).

The tools will recognize that the target element is inside of a panel and open the appropriate panel.

Anchors and the Course Home Page

We have learned that Canvas will not update links that point to an ID on a course home page when you import content from another course if you use the base course path and an ID (example: https://cidilabs.instructure.com/courses/102#kl_introduction) Instead, you should actually link to the content page itself (example: https://cidilabs.instructure.com/courses/102/pages/home#kl_introduction).

Link to a specific panel (legacy method)

With the various panel widgets, it is possible to create links that will open the page to a specific panel with that panel expanded.

For example, the following links will open this page to one of the example panel widgets at the top of this page:

To create a link to a specific panel:

Find out what number the desired panel is by counting each of the panels on the page up to the one you would like to open (including any nested panels). For example, this is panel 13.
Create the link to the page and add ?panel= and then the number of the panel to the end of the url. For example, the url to this panel would be https://cidilabs.instructure.com/courses/102/pages/add-accordion-panels-and-tabs?panel=13

That link would open to this page, open this panel and make sure that it is visible in the browser window.

To create a link to an anchor inside a panel

In addition to opening the panel, linking to a panel will direct the browser to that panel . If you want to direct the browser to a specific element inside that panel, you can target the desired element using its id attribute.

Make sure the target element has an id attribute (example: id="createdAnchor")
Specify the id of the element after the panel in the url using the # symbol followed by the id #createdAnchor. Example: https://cidilabs.instructure.com/courses/102/pages/add-accordion-panels-and-tabs?panel=13#createdAnchor