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 ADA and site accessibility.
Sign in to your site and navigate to the page where you would like the 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 step 7 for each new tab you want to create
Click Save
View your new tabbed widget
Edit Content in a Tabbed Widget
Only one widget can be added to each tab. Additionally, a tabbed widget cannot be placed inside a tab.
Important Note
It is recommended to use <h2> header tags in the headers of each tab to comply with ADA and site accessibility.
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.
Click Save
Display Tabs Vertically or Horizontally
This article will show you how to change the direction of the tabs in the Tabbed widget.
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.
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