Tabs is a pair of macros that enable you to add AUI-styled tabs to provide interactive and categorized information to the page. First add a Tabs Container to the page, then add a Tabs Page macro to the Tabs Container. A Tabs Page macro must be added for each individual tab.

Instructions

Tabs Container

  1. Navigate to the page you want to edit.

  2. Click Edit.

  3. Click the position where you want to add your tabs.

  4. Click Insert More Content > Other Macros.

  5. Select the Tabs Container macro from the Macro Browser.

    The Macro Browser with the Tabs Container macro available.

  6. Select the tab direction and complete and additional options if desired.

    ParameterDescriptionTypeDefaultRequired

    Tab Direction

    Select the layout of the tabs:

    • Horizontal (across the top of the tabs container)

    • Vertically (down the left of the container)

    string

    horizontal

    (tick)

    ID

    Option to specify a unique ID for this element. If using this parameter to apply styling to the element, do not include the # selector.

    string

    none

    (error)

    CSS Class

    Option to apply a custom CSS class to the element, for example, borders or background colors. Enter the CSS class name(s) to apply to the macro (case sensitive); multiple classes can be separated by a space or comma. Do not include the . selector in the class name. Classes must be part of your Global Confluence CSS or defined in a CSS Stylesheet macro that you have added to your page.

    string

    none

    (error)

    Title

    Option to enter text to display in a tooltip.

    string

    none

    (error)

  7. Click Insert. The macro placeholder displays.

    The placeholder for a Tabs Container macro.

Tabs Page

Once you have added a tabs container to your page, you can start adding tab pages.

  1. Click the Tabs Container macro placeholder.

  2. Click Insert More Content > Other Macros.

  3. Select the Tabs Page macro from the Macro Browser.

  4. Define the tab using the following parameters. Title is required.

    ParameterDescriptionTypeDefaultRequired

    Title

    Enter the title of the tab.

    string

    none

    (tick)

    ID

    Option to specify a unique ID for this element, for example, to use as anchor ID. If using this parameter to apply styling to the element, do not include the # selector.

    string

    none

    (error)

    CSS Class

    Option to apply a custom CSS class to the element, for example, borders, background colors, fonts, or padding. Enter the CSS class name(s) to apply to the macro (case sensitive); multiple classes can be separated by a space or comma. Do not include the . selector in the class name. Classes must be part of your Global Confluence CSS or defined in a CSS Stylesheet macro that you have added to your page.

    string

    none

    (error)

    Lazy Loading

    Enables Lazy loading of tabbed content. It is triggered when the tab is activated.

    boolean

    false

    (error)

    Lazy Loading limitations:

    • Inline comments in tabbed content do not work with Lazy Loading enabled.

    • Lazy Loading does not work with the Jira Macro.

    • Lazy Loading does not work with MS Word Macro.

  5. Click Insert. The macro placeholder displays inside the Tabs Container macro.

  6. Add the tab page content. Add an additional Tab Page macro for each tab that you want to create. You can change the order of tabs by dragging the macro placeholder to the desired position.A Tabs Container macro with example Tabs Page macros within.

  7. Save the page to view the rendered the tabs. 

Style Reference

Horizontal tabs

A rendered Tabs Page macro with a horizontal configuration.

Vertical tabs

A rendered Tabs Page macro with a vertical configuration.

Example with CSS

You can add CSS styling by first defining styles in a CSS Stylesheet macro then adding the CSS Class name to the Tabs Container or Tabs Page macro. The simple example below uses two CSS Stylesheet macros with a class used in the Tabs Container macro to assign a border, and another in the Tabs Page for Venue to assign a background color. For more CSS examples, see w3shools.

CSS

CSS Stylesheet macro placeholders

Tabs macros with defined CSS Class parameter

Rendered tabs in page view

Rendered Tabs with custom CSS

Anchor to Tab

If you want anchor to a tabs page, you do not need to insert an Anchor macro; you can simply use the Tabs Page macro ID parameter.

  1. Define a unique ID for the Tabs Page, e.g. CS1.

    Tabs Page macro editor with ID parameter 
  2. Navigate to the location or page where you want to create a link to the tab page.
  3. Click Insert link > Advanced, then paste the full link of the page followed by "#" and the ID of the tab page, e.g. https://docs.adaptavist.com/display/CFM4CS/Tabs#CS1.
  4. Save the page then test the link. It should point to the correct page and tab.