How do I add Tabs to an Article?

Overview

The Tabs element provides a clean, organized way to present multiple content sections within a single space. This document explains how to effectively use the Tabs feature within the WYSIWYG editor.

Default Behavior

The Tabs element consists of two primary components:

• Tab titles that function as selectors
• Tab bodies that contain the associated content

When implemented in your article:

• The first tab is automatically expanded in both the editor and live view
• Users can switch between content sections by clicking different tab titles
• Only one tab body is visible at a time
• The active tab is visually distinguished from inactive tabs by changing the Tab Title's background color darker.

Adding a Tab Element

1. Position your cursor where you want to insert the Tabs element
2. Locate the Tabs button in the Froala toolbar under More Rich > Insert Tabs
3. Click the button and hover the mouse over the number of Tabs to insert.
4. The editor will create Tab Titles and Tab Bodies as two distinct sections.
   1. This is specific to the editor view while editing.

Editing Tab Titles

There are two ways to edit the Title.

1. Click on the Title text in the editor to reveal a Link Toolbar with an 'Edit Text' option.
2. Click on the Title text and type directly onto the Title line.

Experimental Feature: Adding nested elements (such as links or formatted text) to tab titles is supported, but users must click the title text itself rather than the nested element to switch tabs.

Adding Content to Tab Bodies

1. Select the tab whose content you wish to edit by clicking its title
2. Click inside the content area of the active tab
3. Add text, images, or other elements as you would in any other part of the editor
4. Content added to each tab body is preserved when switching between tabs

Unsupported: Nesting Tabs is currently not supported