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.

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

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