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.
Content administrators can declare expanding blocks and tabbed content while configuring the HTML body of topics and articles.
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>
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.
This section contains examples of what expanding blocks and tabbed content look like once published to a Fluid Topics portal.
This topic shows two examples of expanding blocks.
Example 1 - display text under a link
This text appears after expanding the block.
Example 2 - display text next to a link
This topic shows an example of tabbed content.
This is the content of my first tab.
This is the content of my second tab.