Start main page content

Tab

Description

A tab container also allows you to display a larger amount of information in a smaller space. Each subsection (tab) can be viewed in turn so that the user can view only what is of interest to them. Unlike an accordion, only one subsection (tab) can be viewed at a time. 

It should be noted that the vertical space occupied by the tab container will vary depending on the amount of information in the tab. In other words, a tab containing images and text will take up more vertical space than one that simply contains just some text. Thus the tab container is dynamically resized whenever user selects a different tab.

Example

How to use it

Using the tab container type requires the use of two types of content as explained further in the following subsections.

1. Tab Container

  • Select create content from the actions menu beside the section you wish to add content to. The following menu will pop up listing all the content types that are available. The content types listed will depend on the level of access that you have been granted.

  • If the content type is not immediately visible, you can search for it by typing in words. Even typing in “tab” in the search window will bring up the following content type.

  • Click on the radio button next to the Tab Container.
  • Click on the Next button and the following window will become visible.

  • Enter a Name for the content and this is mandatory. This will not be displayed on the published page, but simply act as a name within SiteManager.
  • Title will be the main title for this piece of content. This will appear in larger writing above the Tab container.
  • Add Section link button is used to set where this accordion container will reside. This work is duplication as you are already in this section. 
  • Select the section and you will see the confirmation in the bottom left corner of the screen. Click on the Select section button.
  • SetName is the designated name for this tab container. This name is used to link the individual pieces of tab content that are to be created in this section. This name needs to be unique for only this page and in this example the set name is ExampleTab.

2. Tab Content

In the same section where you have created the Tab Container, click on create new content and you will be presented with the following screen. 

  • When you enter a Name for the content you must start with the number. This number will determine the position in which this content will appear within the tab container.
  • Title will be the main title for this piece of content. This will appear in larger writing
  • Enter all the text for the main body of this Content. You may insert additional images and links. Please use the formatting tools provided to enhance the appearance of the text.
  • Click the Open by Default button should you wish for the accordion container to display this piece without the user having to expand the selection.
  • It is important to specify the SetName with the designated setname for this accordion container which in this example is ExampleAccordion. This will ensure that this piece is linked to the Accordion Container with the same setname. The spelling is crucial and will not work if there is a mistake.
  • Click Save changes to save the content once completed.
  • In this manner, you may add as many pieces of content to the tab container and sort them accordingly.
Share