The Tabbed Widget provides a way to create a unique look for your page. You can create tabs to separate the widgets for a specific topic in one central location. It also allows your users to click and view the content.

Who can use this feature?
System Administrator | Owner | Publisher | Author

Add the Tabbed Widget to a Page

Important Note
It is recommended to use <h2> header tags in the headers of each tab to comply with {{glossary.ADA}} and site accessibility.

Sign in to your site and navigate to the page where you would like tabs located
Ensure that Live Edit Is On
Select the Widgets tab
Drag and drop the Tabbed widget to your page
Note: A tabbed widget cannot be placed inside another tabbed widget.
Enter a Name for your first tab and click Next
Drag and drop a widget to your Tabbed Widget
Note: You can only add one widget per tab.
Click the + icon to add a new tab
Repeat steps 4 to 7 for each new tab you create
Click Save
View your new tabbed widget

Edit Content in a Tabbed Widget

Important Note
It is recommended to use <h2> header tags in the headers of each tab to comply with {{glossary.ADA}} and site accessibility.

Only one widget can be added to each tab. Additionally, a tabbed widget cannot be placed inside a tab.

Instructions

Sign in to your site and navigate to the page where your tabs are located, or create a Tabbed Widget
Ensure that Live Edit is On
Select the tab you would like to edit
Note: To change tabs, you must click on the area around the tab name. Clicking on the text will select the text for editing.
Edit the appropriate widget
Click Save

Display Tabs Vertically or Horizontally

This article will show you how to change the direction of the tabs in the Tabbed widget.

Who can use this feature?
System Administrator | Owner | Publisher | Author

Instructions

Sign in to your site and navigate to the page where your tabs are located or create a Tabbed Widget
Ensure that Live Edit is On
Hover over the widget and select the Tabbed Widget Options icon
Select an option under the Position dropdown menu
- Top: Align tabs at the top of the widget
- Left: Tabs display on the left side of the widget
- Right: Tabs display on the right side of the widget
- Stacked Accordion: Tabs display a vertical list of expanding accordions
  Note: It is possible to have multiple tabs open at once, which cannot be done with any Position setting.
If you selected the Top position, select an Alignment from the dropdown menu
- Equal Widths: Makes the tabs the same width
- Equal spacing: Spaces tabs according to the length of the tab name
- Left: Align tab names to the left
- Center: Align tab names to the center
- Right: Align tab names to the right
If you selected the Left or Right position, edit the Width of the tabs
Click the X in the top right corner, edits will automatically save
Select the Save button at the top of the page

Rename a Tab

Log in to your site and navigate to the page where your tabs are located
Turn on Live Edit
Hover your mouse over your tabbed widget and select the Options icon
Change the tab name(s)
Select X to exit the Widget options window
Scroll to the top and select Save

Delete a Tab in the Tabbed Widget

When you remove a tab, you must first remove the widget within the tab and then you can remove the tab itself.

Important Notes:
In vertically arranged Tabbed widgets, the Tabbed widget's removal icon ("X") may overlap the removal icon of the widget within the tab. This makes it difficult to remove the widget from the tab. In these cases, the Option set will need to be changed so that the tabs display horizontally in the Tabbed widget and the removal icons do not overlap. s

Instructions

Log in to your site and navigate to the page your Tabbed Widget is on
Ensure that Live Edit Is On
Select the tab you want to delete
Hover over the widget within the tab and click the X to remove the widget
Reply OK to the pop-up that asks Are you sure you want to delete this Widget?
Hover over the blue Drag Widget here area, visible once the widget in the tab has been removed, and click the X to remove the area, which will then remove the tab
Click Save

Delete a Widget

Instructions