Add Tabbed Content and Expanding Blocks to Documents - Fluid Topics - Latest

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).

Adding expanding blocks and tabbed content in Fluid Topics is possible by inserting HTML code in the following formats:

• Antora (using a passthrough block)
• FTML
• Jinja
• Markdown
• MkDocs
• OpenAPI (in the description field)

Dedicated procedures also exist for the following formats:

• DITA (see Expanding blocks in DITA content and Tabbed content in DITA content.)
• MadCap Flare (see Expanding Text and Drop-Downs)
• Paligo (see Add expanding blocks and Add tabbed content)

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>

Expanding blocks require custom CSS.

1. Go to the Content styles menu under Portal.

2. 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;
   }
   

   This is a placeholder.

3. Adapt the styling to the look of the portal.

4. Select Save.

Expanding blocks in Paligo content require custom CSS.

1. Go to the Content styles menu under Portal.

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

   /****************************************************************/
   /******** Paligo expanding block, collapsible, accordion ********/
   /****************************************************************/
   .panel {
       border: 1px solid blue;
   }
   
   .panel-body {
       margin: 1em;
   }
   
   .ft-expanding-block-link {
       font-weight: 600;
       margin-top: 1rem;
       text-decoration: none;
       position: relative;
   }
   
   .ft-expanding-block-link::before {        
       content: "\e91d";
       display: inline-block;
       font-family: "fticons";
       font-size: 14px;
       margin-right: 0.25rem;   
       -webkit-transform: rotate(-90deg);
       -ms-transform: rotate(-90deg);
       transform: rotate(-90deg);  
       -webkit-transition: -webkit-transform 0.2s ease-in;  
       transition: -webkit-transform 0.2s ease-in;  
       -o-transition: transform 0.2s ease-in;  
       transition: transform 0.2s ease-in;  
       transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in;
       position: absolute;
       left: 0;
   }
   
   .ft-expanding-block-link div.title {
       padding-left: 1rem; /* Adjust this value as needed to make space for the arrow */
   }
   
   .ft-expanding-block-link:focus {
       outline: initial !important;
   }
   
   .ft-expanding-block-link.ft-expanding-block-expanded::before {        
       -webkit-transform: rotate(0deg);
       -ms-transform: rotate(0deg);
       transform: rotate(0deg);   
   }
   /****************************************************************/
   

   This is a placeholder.

3. Adapt the styling to the look of the portal.

4. Select Save.

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>

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

Example 2 - Display text next to a link

This topic shows an example of tabbed content.