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
Example 2 - Display text next to a link
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.