Knowledge Base: Collapsible Content

Summary

This article provides instructions for collapsible content in the TeamDynamix (TDx) Knowledge Base (KB) Editor. This article is intended for KB editors.

 

Examples

Click to Expand/Collapse ​​​​​​

 

<div class="panel panel-primary" style="border: 1px solid #203864;">
<div class="panel-heading" data-target=".collapsePanel" data-toggle="collapse" style="cursor: pointer; background-color: #203864; border-bottom: 1px solid #203864;"><strong>Click to Expand/Collapse <label class="pull-right btn fa fa-expand fa-2x style=" style="color:white"> </label> ​​​​​​</strong></div>

<div aria-expanded="true" class="panel-body panel-collapse collapsePanel collapse in" style="">
<p>Content</p>
</div>


</div>

Note: You can control whether your article saves with this content expanded or not.  Save the article with it the way you want (closed or open) and that's how it will be when readers open the article.

As a result, you may see variations in the <div> statement just before the content.  It may look like either of these:

If you saved the content bar as NOT expanded:  

  • <div aria-expanded="false" class="panel-body panel-collapse collapsePanel collapse" style="height: 30px;"> 

If you saved the content bar as EXPANDED: 

  • <div aria-expanded="true" class="panel-body panel-collapse collapsePanel collapse in" style="">

 

Expandable via Button

 

Expandable Via Check Box

 

Q1. Example Using <details> Tag

 

<details open="" style="margin-bottom: 20px;"><summary style="display:list-item; font-size:20px;"><strong>Q1.</strong> Example Using &lt;details&gt; Tag</summary>
<p>&nbsp;</p>

<p>Some contents</p>

</details>

 

How-To

Task: To implement collapsible contents in the Knowledge Base articles.

Instructions

Step 1 - Pick a template you like from the example section above.

Step 2 - Copy the example source code displayed in the text box

Step 3 - In your KB Article Editor, select "Source" from the top left of the editor's toolbar.

Warning: Before making any changes to the article source code, it's important to back up the entire original version. Even a small mistake in the code, like a missing tag or misplaced character, can break the layout or functionality of the article. To avoid losing content or causing display issues, always copy and save the full source code in a separate file before editing. This way, you can easily restore the original if something goes wrong.

 

Step 4 - Locate the spot where you want the panel to appear.

Note: The article’s source code is often difficult to read. To help locate the right spot, it’s recommended to use Ctrl+F (or Command+F on Mac) to search for nearby content.

Step 5 - Paste the source code in a place you like.

Note: 

  • If you have multiple panels, give each element a different ID name (highlighted in yellow in the examples above) to avoid conflicts.
  • Put your content between the content container tags (highlighted in orange in the examples above).

 

Step 6 - Exit the Source Code Editor by clicking the "Source" at the top left again.

Step 7 - Edit the Heading/Title and Body of the box to contain the desired content.

Note: TDx remembers the last state of the panel, making that the default for the article. If you want the box collapsed by default, then collapse it in the editor before submitting/approving it.

 

Outcome

You should be able to implement collapsible content in the Knowledge Base article.

 

Further Readings

Knowledge Base: Using the KB Editor Toolbars

 

Need additional help?

Visit the TeamDynamix area in the Knowledge Base

To request service, report an issue, ask questions, or request training, submit a TeamDynamix Application Administration Support Request 

 

Print Article