Content Comparison

Panel

bgColor	#FFF0B3

ID&D KB How-to Guide

Working together to enhance teaching & learning. If you need additional assistance, please reach out to the ID&D team.

Sometimes we have a lot of content to share with our students, but we don’t want them to be overwhelmed! Consider a typical course page that has several sections of content such as the one pictured here. DesignPLUS offers us a variety of ways to physically engage our students with the content we want them to consume.

DesignPLUS offers three specific tools you can use to organize content for pages like this: Accordion, Expander and Tabs. These elements allow us to provide a lot of content without taking up a lot of space. They allow us to split the content up into smaller pieces and place them in panels, where students can open up a panel and read the smaller pieces. In the Accordion, students can only view one panel at a time, while in the Expander students can keep as many panels open as they want. The Tabs allows a student to swap the content displayed on a page, using either tabs across the top (horizontal) or tabs along the side (vertical).

Sometimes students need clarification for words or concepts they might not be familiar with. In these cases, design PLUS offers three quick interactive features: Tool Tip, Popover, or Dialog Box. These features allow you to provide some additional information for those students who need it, without diverting their attention from the main content.

This article provides step by step guides on how to reimagine this page using the interactive components below.

Tip

Tip!

You can click on the images in this article to see them larger and with more detail.

Using an Accordion or Expander for Content Display

An Accordion or Expander display allows you to save space on the page. An Accordion only allows the student to view one "chunk" of content at a time and an Expander allows the student to have more than one open.

Expand

title	Step-by-Step...

Create or open a page that has a page banner and introductory content. Open the DesignPLUS Sidebar.
Image Modified

Expand

title	Click to continue the Step-by-Step instructions...

To add an Accordion or Expander element to the page under the introductory content:
1. Place your cursor at the end of the content block which holds the introductory content (where the interactive component will be added)
2. Scroll down the Sidebar and locate Interactive category (or search for

the “Interactive” category

1. it)
2. Click the Accordion tool or the Expander tool based on what type of interactivity you want.
  
  Image Modified
The Sidebar will display the Accordion Tool (or Expander) in the Edit (target) tab. The Accordion/Expander content area will appear on your page. It will have two panels as a default.

Image Modified
To change the number of panels you will use:
1. Click on the + sign next to the number displayed for Panels under the Content panel, or
2. Click on the +Panel button next to it.
  
  Image Modified
The additional panels will be added at the bottom of the page and indicated in the Content panel in the Sidebar.

Image Modified
The next step is to create the headings for each of the panels. It is important to create the headers of the panels within the Content Panel, rather than entering them into the page. Enter the title for each panel. They will be displayed on your page.
Image Modified
Open the Style Panel and select the style you want for the panel when it opens:
1. Accordion or Expander - this displays an up arrow to open the panel next to the panel heading and a down arrow to close it
  
  Image Modified
2. Accordion Plus/Minus or Expander Plus/Minus - this displays a + (plus) to open the panel and a- (minus) to close it.

Image Removed

2. You can demonstrate how the style will look and act in the Preview panel
  
  Image Added
To draw attention to the panels you can select colors for the status of the headings. The color selected will apply to all panels in a given accordion or expander.
1. Select the Default Color button to choose a color to display on the page before it is activated
2. Click on the color you want from the pop-up window
3. Repeat this for Active status (when the heading is clicked or opened and for Hover status (when heading is moused over)
4. You can demonstrate how the colors change in the Preview panel
  
  Image Modified
When the page is saved, the display will change based on the actions taken by the viewer.

Image Modified
Image Modified

anchor

Tabs

Using Tabs for Content Display

DesignPLUS also has a feature that allows you to use horizontal or vertical tabs to switch between panels of content.

Create or open a page that has a page banner and introductory content. Open the DesignPLUS Sidebar. Place your cursor at the end of the content block which holds the introductory content.
Section ColumnImage Removed
Columnwidth70%
1. Scroll down in the Sidebar and locate the
“Interactive” category.
1. Interactive category (ore search for it)
2. Click on the Tabs tool
  Image Added

Expand

title	Click to continue Step-by-Step instrucitons...

The Sidebar will display the Tabs Tool in the Edit (target) tab. The Tabs content area will appear on your page. It will have two panels as a default.

Image Removed

Image Added

To add additional

panels Column

Image Removed
Columnclick

tabs, either:

Section

1. Click on the

“

1. +

”

1. next to the number displayed for Panels under the Content panel in the Sidebar, or

click

1. Click on the

“

1. +

Panel”

1. Panel button next to it

.

1. Image Added
The additional panels will be added at the bottom of the page and indicated in the Content panel in the Sidebar.

Image Removed

Image Added
The next step is to create the headings for each of the panels. It is important to create the headers of the accordion within the Content Panel, rather than entering it into the page. Enter the titles of the sections for each panel. They will be displayed on your page.

Image Removed

Image Added
Open the Style Panel to select the style and direction you want to have the Tabs displayed. You have several options:

Section Column

Image Removed

Column

1. Basic

Tabs –

1. tabs - these tabs appear horizontally across the page and are outlined when selected
2. Underlined Tabs

–

1. - these tabs are displayed horizontally, and the headings are underlined when selected
2. Pill

tabs

1. Tabs –

the

1. these tabs are displayed horizontally and appear as solid-colored blocks when selected
2. Pill Tabs Vertical

–

1. - the tabs are displayed horizontally and appear as colored

blocs

1. blocks when selected
2. Pill Tabs Vertical Outlined

–

1. - the tabs are displayed horizontally and appear as outlined colored blocks when selected

You can demonstrate how the style will look and act in the “Preview” panel

1. The displays can be viewed int he Preview panel in the Sidebar
  
  Image Added
To draw attention to the panels you can select colors for the status of the headings. Click on button in the Style panel to select your display color from the options provided. The combinations vary based on the Tab type you have selected.
1. Select the Default Color button to choose a color to display on the page before it is activated
2. Select the Active status color (when the heading is clicked or opened)
3. Select the Hover status color (when heading is moused over)
4. You can demonstrate how the colors

will work

1. change in the Preview panel

.

Image Removed

1. Image Added
Cut and paste or enter the content for each panel. Save your page

. These examples show (1) the Style Pill Tabs, with Red as the default outline color and yellow for the active panel, and the Pill Tabs Vertical, with the same color selections Column

width	10%

ColumnPill Tabs selected (horizontal) with default maroon; active yellow

Image Removed ColumnPill tabs Vertical selected with maroon default, active yellow

Image Removed

.

Section

Back to List

AnchorToolTipToolTip

Using Tool Tips for Content Clarification

Sometimes students need a quick hint or definition to understand terminology or concepts the content presents. A Tool Tip allows you to provide simple text content when a student hovers over a specific word or set of words in the content.

To add a Tool Tip:
Section ColumnImage Removed
Columnwidth70%
1. Open the DesignPLUS Sidebar to the Add New element tab
.
2. Highlight the word or phrase in the content (Trigger
Text) needing the clarification.
1. text) where you want to add the tip
2. Search for
"
1. tooltip
"
1. in the Sidebar search field
.
2. Click on the ToolTip Icon
  Image Added

Expand

title	Click to continue Step-by-Step instructions...

The Edit (target) tab in the Sidebar will open.

Section Column

Image Removed
Columnwidth70%

1. The highlighted text will appear in the Trigger Text field
2. Enter the tip text you want to appear in the Content Text field
3. The information will appear in the Editing window on your page (RCE window)
  
  Image Added
Save your page

Image Removed

.
The Trigger Text is outlined with a broken line. When the student hovers over or clicks on the Trigger Text a popup will appear with the Content Text. If the student clicks on the Trigger Text the content will stay until it is clicked again.

Image Removed

Back to List

AnchorPopoverPopover

Image Added

Using Popovers for Content Clarification

Similar to the Tool Tip, a Popover can give students a quick hint or definition to help them clarify terminology or concepts presented in the content. A Popover allows you to provide simple text content or links to help students when they hover over a specific word or set of words in the content.

To add a Popover:
section
ColumnImage Removed
Column
width 70%
1. Open the DesignPLUS Sidebar to the Add New element tab
.
2. Highlight the word or phrase in the content (Trigger
Text) needing
1. text) where you want to add the clarification
.
2. Search for
"
1. popover
"
1. in the Sidebar search field
.
2. Click on the Popover Icon
  Image Added

Expand

title	Click to continue Step-by-Step instructions...

The Edit (target) tab in the Sidebar will open.

Section Column

Image Removed
Columnwidth70%The

1. The highlighted text will appear in the Trigger Text field

The Trigger text will be identified in the RCE window

1. Enter the information you want to appear in the Content Text field
2. An information box will appear in the Editing window on your page (RCE window)
  Image Added
Enter your content into the Content Text field. This can contain links and text.

Image Removed

Image Added
Save your page.

Image Removed

The Trigger Text is outlined with a broken line. When the student hovers over or clicks on the Trigger Text a popup will appear with the Content Text. If the student clicks on the Trigger Text the content will stay until it is clicked again. If a link is included in the Popover, the linked content will open in a new tab.

Image Removed

Back to List

AnchorDialogBoxDialogBoxUsing

Image Added

Using A Dialog Box for Content Clarification

Similar to the Tool Tip and Popover, the Dialog Box also helps provide additional information to the student to clarify content concepts. However, this type of element requires the student to interact with the dialog box in order to move on.

To add a Dialog Box:
Section ColumnImage Removed
Columnwidth70%
1. Open the DesignPLUS Sidebar to the Add New element tab
.
2. Highlight the word or phrase in the content (Trigger
Text) needing
1. text) where you want to add the clarification
.
2. Search for
"
1. dialog
"
1. in the Sidebar search field
.
2. Click on the Dialog Box Icon
.
The Edit (target) tab will open.
Section ColumnImage Removed
Column
width 70%
The highlighted text will appear in the Trigger Text field
The Trigger text will be identified in the RCE window
The Dialog Box will appear in the RCE window
Change the Title of the Dialog Box. You can enter this either in the Content panel in the Sidebar, or in the Dialog Box in the RCE on your page.
Image RemovedEnter your content into the Content Text field. This can contain images, links and text.
Image RemovedSet the size of your Dialog Box in the Content panel in the Sidebar. You can use pixel or %, however, pixel is recommended.
Image RemovedSave your page
Image RemovedThe Trigger Text is presented as a link (underlined). When the student clicks on the Trigger Text, the Dialog Box appears as a pop-up. The student must either visit the link or close the Dialog Box to return to the page. If the student visits the link, it will open a new browser window.
Image Removed

Back to List

AnchorSummarySummarySummary of Steps Panel

borderColor	#8A0000
bgColor	#FFDD80
titleColor	#FFC420
borderWidth	1
titleBGColor	#8A0000
borderStyle	solid
title	Summary of Steps

Expand

title	Using an Accordion Display

Create or open a page that has a page banner and introductory content. Open the DesignPLUS Sidebar.
To add an Accordion element to the page::
1. Place your cursor at the end of the content block which holds the introductory content.
2. Scroll down in the Sidebar and locate the “Interactive” category.
3. Click the Accordion tool.
The Sidebar will display the Accordion Tool in the Edit (target) tab. The Accordion content area will appear on your page. It will have two panels as a default.
To add additional panels, either:
1. click on the “+” next to the number displayed for Panels under the Content panel, or
2. click on the “+Panel” button next to it.
The additional panels will be added at the bottom of the page and indicated int the Content panel in the Sidebar.
The next step is to create the headings for each of the panels. It is important to create the headers of the accordion within the Content Panel, rather than entering it into the page. Enter the titles of the sections for each panel. They will be displayed on your page.
Open the Style Panel and select the style you want for the panel to open:
1. Accordion – this displays an up arrow to open the panel next to the panel heading, and a down arrow to close it
2. Accordion Plus/Minus – this displays a “+” to open the panel and a “-“ to close it
3. You can demonstrate how the style will look and act in the “Preview” panel
To draw attention to the panels you can select colors for the status of the headings.
1. Click on button in the Style panel to select your display color from the options provided
2. Default Color – will display this color of the panel when the page is open
3. Active – this will change the color when the panel is opened
4. Hover – this will change the color when the mouse is hovered over the panel
5. You can demonstration how the colors will work in the Preview panel
Cut and paste or enter the content for each panel. Save your page.

Expand

title	Using Tabs for Content Display

Create or open a page that has a page banner and introductory content. Open the DesignPLUS Sidebar. Place your cursor at the end of the content block which holds the introductory content.
1. Scroll down in the Sidebar and locate the “Interactive” category.
2. Click the Tabs tool.
The Sidebar will display the Tabs Tool in the Edit (target) tab. The Tabs content area will appear on your page. It will have two panels as a default.
To add additional panels, either:
1. click on the “+” next to the number displayed for Panels under the Content panel, or
2. click on the “+Panel” button next to it.
The additional panels will be added at the bottom of the page and indicated in the Content panel in the Sidebar.
The next step is to create the headings for each of the panels. It is important to create the headers of the accordion within the Content Panel, rather than entering it into the page. Enter the titles of the sections for each panel. They will be displayed on your page.
Open the Style Panel to select the style and direction you want to have the Tabs displayed. You have several options:
1. Basic Tabs – these tabs appear horizontally across the page and are outlined when selected
2. Underlined Tabs – these tabs are displayed horizontally and the headings are underlined when selected
3. Pill tabs – the tabs are displayed horizontally and appear as solid colored blocks when selected
4. Pill Tabs Vertical – the tabs are displayed horizontally and appear as colored blocs when selected
5. Pill Tabs Vertical Outlined – the tabs are displayed horizontally and appear as outlined colored blocks when selected
6. You can demonstrate how the style will look and act in the “Preview” panel
To draw attention to the panels you can select colors for the status of the headings. Click on button in the Style panel to select your display color from the options provided. The combinations vary based on the Tab type you have selected. You can demonstrate how the colors will work in the Preview panel.
Cut and paste or enter the content for each panel. Save your page.

Expand

title	Tool Tips for Content Clarification

To add a Tool Tip:

Open the DesignPLUS Sidebar to the Add New element tab.
Highlight the word or phrase in the content (Trigger Text) needing the clarification.
Search for "tooltip" in the Sidebar search field.
Click on the ToolTip Icon.

The Edit (target) tab will open.

1. Image Added

To add a Dialog Boxer:

Open the DesignPLUS Sidebar to the Add New element tab.
Highlight the word or phrase in the content (Trigger Text) needing the clarification.
Search for "dialog" in the Sidebar search field.
Click on the Dialog Box Icon.

The Edit (target) tab will open.

The highlighted text will appear in the Trigger Text field
The Trigger text will be identified in the RCE window
The Dialog Box will appear in the RCE window

1. on your page (RCE window)
  Image Added
Change the Title of the Dialog Box. You can enter this either in the Content panel in the Sidebar, or in the Dialog Box in the RCE on your page.

Image Added
Enter your content into the Content Text field. This can contain images, links and text.

Image Added
Set the size of your Dialog Box in the Content panel in the Sidebar. You can use pixel or %, however,

pixel

using pixels is recommended.

Image Added
Save your page
The Trigger Text is presented as a link (underlined). When the student clicks on the Trigger Text, the Dialog Box appears as a pop-up. The student must either visit the link or close the Dialog Box to return to the page. If the student visits the link, it will open a new browser window.

Image Added

Expand

title	Click to continue Step-by-Step instructions...

The information

The Edit (target) tab in the Sidebar will open for the Dialog Box tool.
1. The highlighted text will appear in the Trigger Text field

Enter the text you want to appear in the “Content Text field

1. The Dialog Box will appear in the

RCE

1. Editing window

Save your page

The Trigger Text is outlined with a broken line. When the user hovers over the Trigger Text a popup will appear with the Content Text. If the user clicks on the Trigger Text the content will stay until it is clicked again.

Expand

title	Popovers for Content Clarification

To add a Popover:
1. Open the DesignPLUS Sidebar to the Add New element tab.
2. Highlight the word or phrase in the content (Trigger Text) needing the clarification.
3. Search for "popover" in the Sidebar search field.
4. Click on the Popover Icon.
The Edit (target) tab will open.
1. The highlighted text will appear in the Trigger Text field
2. The Trigger text will be identified in the RCE window
3. The Content Text field will appear in the RCE window
Enter your content into the Content Text field. This can contain links and text.
Save your page
The Trigger Text is outlined with a broken line. When the user hovers over or clicks on the Trigger Text a popup will appear with the Content Text. If the user clicks on the Trigger Text the content will stay until it is clicked again. If a link is included in the Popover, the linked content will open in a new tab.

Expand

title	Dialog Box for Content Clarification

Version	Old Version 29	New Version Current
Changes made by	Janice Orcutt	Janice Orcutt
Saved on	Nov 01, 2024	Jan 31, 2025

Versions Compared

Key

ID&D KB How-to Guide

Tip!

Using an Accordion or Expander for Content Display

Using Tabs for Content Display

Using Tool Tips for Content Clarification

Using Popovers for Content Clarification

Using A Dialog Box for Content Clarification

Related articles