Add Tabs and Expanding Blocks to Content - Fluid Topics

Overview

Content administrators aim to design content in ways that maximize its value and impact. Adding expanding blocks and tabs can help achieve this objective in the following ways:

Tabbed content and expanding blocks provide additional ways to customize the content experience.
Content administrators can create new "paths" through content that direct the reader's attention toward specific subsets of information.
Since readers have to perform an action to display expanding blocks and tabs, the content experience is more interactive.
Readers might find it easier to click their way through step-by-step procedures if each step is located in a separate tab.
"Hiding" information in an expanding block when it does not apply to all use cases makes content cleaner and more relevant.

Expanding blocks and tabbed content are only available for structured content (topics and articles).

Procedure

Content administrators can declare expanding blocks and tabbed content while configuring the HTML body of topics and articles.

When adding expanding blocks to DITA content, a separate, DITA-specific procedure exists.

For content authored in Paligo, the paligo connector transforms accordions into ft:expandable-block components and supports expandable blocks within expandable blocks.

Add an expanding block

The following lines show how to add an expanding block with content that appears under a link:

<div>
<span class="ft-expanding-block-link" data-target-id="expanding-block">This text prompts the user to click to expand the block</span>
<pre id="expanding-block" class="ft-expanding-block-content">
This text appears after expanding the block.
</pre>
</div>

The following lines show how to add an expanding block with content that appears next to a link:

<div>
<span class="ft-expanding-block-link" data-target-id="my-expanding-block">Click here to see more</span>
<span class="ft-expanding-block-inline-content" id="my-expanding-block">This text appears after expanding the block.</span>
</div>

If configuring content in Author-it or Paligo, use the built-in expanding block generator instead of following the procedure described in this document.

Add tabbed content

The following lines show how to add tabbed content to a topic or article.

<div data-ft-tab-label="Tab 1">
    <p>Tab content 1</p>
</div>
<div data-ft-tab-label="Tab 2">
    <p>Tab content 2</p>
</div>

- All tabs belonging to the same group must be direct siblings in the DOM.

- For each tab, it is necessary to define both the tab's content and its label.

There is no limit to the number of tabs a content administrator can configure.

Examples

This section contains examples of what expanding blocks and tabbed content look like once published to a Fluid Topics portal.

Expanding block

This topic shows two examples of expanding blocks.

Example 1 - display text under a link

Click here to see more

This text appears after expanding the block.

Example 2 - display text next to a link

Click here to see more This text appears after expanding the block.

Tabbed content

This topic shows an example of tabbed content.

This is the content of my first tab.

This is the content of my second tab.