Tab Snippets

---

The Tabs Snippet organizes your content in different panels, and each panel is viewable one at a time. Tabs are a great way to navigate groups of large content on a single page. Each panel of content is displayed by clicking the corresponding tab header.

 

Snippet Options

---

TAB-STYLE

Controls the look and feel of the tab snippet. (Options: STYLE-1, STYLE-2)

• STYLE-1
• STYLE-2

 

TAB-FILL

Controls the spacing of each tab. When this option is set to YES, the tabs will expand equally to fill the width of the Tabs Snippet. When this option is set to NO, each tab will only grow to be as wide as its Tab Header text. (Options: YES, NO)

• YES
• NO

 

TAB-BORDER

Controls whether or not a border should be shown around the tab content. (Options: YES, NO)

• YES
• NO

 

 

Snippet Columns

---

Tab Header

The title of the tab, displayed in a row with all tab headers above the tab content. Clicking the tab header switches to the corresponding tab.

 Text Only, additional content will be removed.

 

Tab Content

The content of the tab panel.

 WYSIWYG content, nested snippets, components, and assets allowed.

 

 

Linking to a Tab

To link directly to a specfic accordion, an anchor () tag can be added to any Tab Header cell. By doing so, #anchor-name can be appended to the end of the page URL to make the desired tab active when the page loads.

Please Note: While spaces can be used when creating a new anchor, they are not supported here. Any spaces will be converted to dashes ( - ) during page transformation.

 

 

Examples

---

Example 1

This example uses the STYLE-1 TAB-STYLE setting, which displays each tab with a white background and outlines the currently selected tab with a border. A border also separates the tabs from their content. In this example, TAB-BORDER is set to NO.

• Tab One
• Tab Two
• Tab Three

 

 

Example 2

This example uses the STYLE-1 TAB-STYLE setting, which displays each tab with a white background and outlines the currently selected tab with a border. A border also separates the tabs from their content. In this example, TAB-BORDER is set to YES, outlining the tab content with a border.

• Tab One
• Tab Two
• Tab Three

 

 

Example 3

This example uses the STYLE-2 TAB-STYLE setting, which displays each tab with a white background, except for the currently selected tab, which is displayed with a red background and white text. In this example, TAB-BORDER is set to NO.

• Tab One
• Tab Two
• Tab Three

 

 

Example 4

This example uses the STYLE-2 TAB-STYLE setting, which displays each tab with a white background, except for the currently selected tab, which is displayed with a red background and white text. In this example, TAB-BORDER is set to YES, outlining the tab content with a border.

• Tab One
• Tab Two
• Tab Three

 

 

Example 5

This example uses the STYLE-2 TAB-STYLE setting, which displays each tab with a white background, except for the currently selected tab, which is displayed with a red background and white text. In this example, TAB-BORDER is set to YES, outlining the tab content with a border; TAB-FILL has been set to YES, causing each tab to be spaced evenly across the Tabs Snippet.

• Tab One
• Tab Two
• Tab Three