Working with Tab Set elements

You can easily set on-page behavior and visual design plus rearrange tab order and copy tabs

When you select a Tab Set element, three context menus are shown on the ribbon:

Options
Style
FX

These are also available if you select the element's three-dot menu icon.

Options

The Options tab has settings for controlling the Tab Set's functional behavior.

The Options tab is different for presentation (Claro) and responsive (Flow) projects.

Options Tab in Presentation (Claro) Projects

The Orientation section lets you choose how the Tab Set's labels are laid out, or switch the Tab Set to an Accordion Menu. (Tab Sets and Accordion Menus are the same type component element, just with different display behaviors.)

The Layout menu is only available if you have chosen a Tab Set orientation with vertical tabs. It lets you control the layout relationship between the vertical tabs and the body content.

In the Controls section:

Justified sets the tabs to be equalled spaced with the available width of the element
Sequential sets tabs to be only accessible to the learner in sequential order
Start Unopened sets the tab set as closed, with the learner having to select the first tab to see its content

In the Content section:

Add Tab lets you add a new tab
Gutters lets you turn on or off the default padding for body content (the spacing between the body content elements and the borders of the Tab Set element)

In a presentation (Claro) project, the Accordion, Accordion Style and Default State sections are only available and only apply to an Accordion Menu. They let you:

Show + and - icons for closed or open menu panels
Choose between the two available accordion menu display styles
Choose whether the accordion is initially shown with all of its panels closed, its first panel open or all panels open

Options Tab in Responsive (Flow) Projects

In a responsive Project, a Tab Set's Options includes Respond At, which lets you set the breakpoint at which you want the Tab Set to change to an Accordion Menu. On narrower screens and browser sizes an Accordion Menu is often a better visual display and better user experience than a horizontal Tab Set.

Because of this, the Accordion, Accordion Style and Default State sections are available so you can set the behavior for the Accordion Menu. They let you:

Show + and - icons for closed or open menu panels
Choose between the two available accordion menu display styles
Choose whether the accordion is initially shown with all of its panels closed, its first panel open or all panels open

The other Options tab settings function the same as in a presentation (Claro) project.

Style

The Style tab has settings for controlling the Tab Set's visual appearance.

The Shape section sets the appearance for the upper tabs.

The Color section sets the color choice for the selected tab state.

The Opacity section sets the opacity for the selected tab state.

The Background menu lets you set a fill color for the body of the tab set.

Reordering Tabs

You can rearrange the order of the tabs in a Tab Set.

When you have a specific tab selected, the Move tools (up and down arrows) are available.

In a horizontal Tab Set, the up arrow will move the selected tab one step to the left. The down arrow will move it one step to the right.

Duplicating and Copying Tabs

You can easily duplicate a tab in a Tab Set.

The duplicated tab will be added as a new tab at the end of the Tab Set.

You can also easily copy a tab in one Tab Set and add (paste) it in another Tab Set.

Showing Checkmarks for Tab Viewed/Completion Status

There is a publishing profile option that allows you to turn on or off completion checkmarks for Tab Sets and Accordion Menus at the full project level.