Tabs Portlet Guide
The Tabs portlet allows you to have multiple content areas within a single portlet. These content areas can be displayed with tabs or as collapsible sections.
Adding a Tabs Portlet
The process for adding a Tabs portlet to a page is the same process as for adding any other portlet to a page.
Set Design Mode to On.
Find the region where you wish to display your Tabs portlet. In the Portlet Library, click on the Basic category.
Drag and drop the Tabs portlet on to the page.
Editing a Tabs Portlet
To set up a Tabs portlet:
Set Design Mode to On.
Click the pencil icon in the corner of the Tabs portlet.
Adding a Tab
To add a new tab to your Tabs portlet, click the plus icon to create a new tab.
Naming a Tab
To change the name of a tab, click on the tab. The name of the active tab will be editable.
Make any changes you wish to the name of the tab.
To save your change, either click on another tab or use Save Draft or Publish on the portlet.
Reordering Tabs
If you wish to change the order of the tabs, you can do so by hovering your mouse over one of the tabs. Then drag and drop the tab to the new desired location.
Note: To move the tab, you must hover over a part of the tab that is a text box or the X button. If the tab you are moving is the active tab, that means you will have to have your mouse near the edges of the tab.
Deleting a Tab
To delete a tab, click the X button on the tab you wish to edit and click OK to confirm.
Adding a Content to a Tab
To add content to a tab, simply click on the tab you wish to edit. After doing so, use the editor to create or edit content just as you would with a Content portlet.
If you want to make edits to additional tabs, simply click on each of the tabs you wish to edit and make any changes you desire.
Switching between Accordion and Tab Views
There are two ways that a Tabs portlet can be viewed on the page: as a content area with tabs across the top of it, or as a list of collapsible accordion items. When the page width is too small for tabs to display properly, the accordion view will be used. How the portlet looks (when the width is wide enough to allow for tabs to be displayed) is dependent on a configuration setting within the portlet.
When you edit a Tabs portlet, there is a Display Setting for portlet option. You can choose between Auto resize and Accordion only. With Auto resize, the portlet will be in Tabs view when the portlet width is great enough to accommodate tabs. If the width becomes too narrow, then the Accordion view will be displayed. If you are using a responsive template, the portlet can switch between views as you resize the page. If you choose Accordion only, then the portlet will always display in Accordion mode regardless of width.
Saving Changes to Portlet
Once you have finished making your edits, choose one of the following options:
Save Draft
As the name implies, clicking Save Draft will save your work. You can come back again later and continue to edit the page. Clicking Save Draft does not make changes to the live page on the site. Anyone who visits the webpage will see the live version of the page, they will not see your saved changes.
When you are ready to make your saved changes live on the site, just click Publish.
Note: If you use Save Draft the portlet will continue to be locked. If someone else tries to edit the portlet they will see that the portlet is currently locked. The portlet will also remain locked if you close the editor without clicking one of the buttons.
Publish
If you want to immediately make your changes to a portlet live, use the Publish button. Your changes will instantly appear on the page and any visitors will see the updated version of the portlet. The portlet will also be checked in so that other users may make edits (assuming they have the appropriate permission level).
Cancel
If you decide you are not going to make any changes, or you do not want to preserve the changes you have made, click Cancel. This will check the portlet back in to the system without saving any of the changes you have made.