Add Tabbed Content and Expanding Blocks to Documents - Fluid Topics

Overview

Adding expanding blocks and tabbed content can help content creators hide information when it does not apply to all use cases.

For example, technical writers can use tabbed content to provide information per platform (such as separate procedures for Windows and macOS).

Availability

Adding expanding blocks and tabbed content in Fluid Topics is only possible in content formats where users can add HTML code.

For content authored in Paligo, the Paligo connector transforms expanding blocks into ft:expandable-block components. It also supports expanding blocks within expanding blocks.

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

Procedure

Style expanding blocks

Expanding blocks require custom CSS.

Go to the Content styles menu under Portal.

Copy and paste the following codeblock in the Topic Styles editor:

.ft-expanding-block-link:not(.glossary-link) {
border-width: 1px;
border-style: solid;
border-radius: 0.3em;
padding: 6px 5px;
text-decoration: none;
outline: none !important;
&::before{
    font-family: "fticons";
    content:"\e957";
    display: inline-block;
    margin-left: 5px;
    margin-top: 20px;
}
&.ft-expanding-block-expanded {
    &::before{
    transform:rotate(90deg);
    margin-left: 5px;
    }
}
}

.ft-expanding-block-content {
background-color: transparent !important;
border-style: none !important; 
white-space: pre-wrap;
line-height: 1.5;
font-family: 'Source Sans Pro',system-ui !important;
font-size: 1em !important;
font-weight: 400 !important;
}

Select Save.

Add an expanding block

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

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

CSS class ft-expanding-exclusive is optional. Readers can only open one ft-expanding-exclusive expanding block at a time in the same document.

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.