Collapsible Content in KB Articles

Table of Contents

Box Examples:

Expandable Via Click on Header

Expandable via Button


<div class="panel panel-primary">


<div class="panel-heading"><strong> HEADING HERE </strong><label class="pull-right gutter-bottom-none " style="font-weight: normal"><input checked="unchecked" class="btn btn-default " data-target=".IDFirstProcess" data-toggle="collapse" type="button" value=" ◄ Show/Hide " /></label></div>

<div aria-expanded="true" class="panel panel-body IDFirstProcess collapse" style="">


<p class="gutter-top-none">BODY HERE</p>
</div>
</div>

 

Expandable Via Check Box

 

 

Return to the Article Table of Contents above

 

How to Copy Into Your Article

  1. Edit your article
  2. Set your mouse cursor where you wish to enter the box
  3. Select templates from the KB editor menu
  4. From the Templates menu, select Collapsible Content
  5. Remove any Panels you do not want, remove the info text above the panels.
  6. Edit the Heading/Title and Body of the box to contain the desired content. 

 

 

 

Return to the Article Table of Contents above

 

Multiple Boxes Within the Same Article

The boxes are hard coded to data-target ID, so if you want to use more than one in the same KB article you will have to change the ID for each box.

Failure to do so will prevent subsequent boxes from being expanded/collapsed. 

  • Change the Data-Target Tag ID to be unique across all boxes.
  • Change the Class Panel Panel-Body Tag ID to match that box's Data-Target ID.
  • Note: The ID's are case sensitive and must match case between both tags. 
    • And, for some reason I keep finding the case incorrect even though I'm sure that I typed it correct. So, if a box is not expanding/collapsing, check the case... Because TDX may be changing the case?
  • Example:
    • First Box:
      • <div class="panel-heading"><strong>HEADING HERE </strong><label class="pull-right gutter-bottom-none checkbox-inline" style="font-weight: normal"><input checked="checked" data-target=".IDFirstProcess" data-toggle="collapse" type="checkbox" />Hide</label></div>
      • <div aria-expanded="false" class="panel panel-body IDFirstProcess collapse" style="height: 32px;">
    • Second Box:
      • <div class="panel-heading"><strong>HEADING HERE </strong><label class="pull-right gutter-bottom-none checkbox-inline" style="font-weight: normal"><input checked="checked" data-target=".IDSecondProcess" data-toggle="collapse" type="checkbox" />Hide</label></div>
      • <div aria-expanded="false" class="panel panel-body IDSecondProcess collapse" style="height: 32px;">
 

 

Return to the Article Table of Contents above

 

Default: Expanded or Collapsed

TDX remembers the last state of the box, 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.

 

The actual HTML code uses > in < after the collapse in panel panel-body to designate an expanded by default panel: <div aria-expanded="true" class="panel panel-body IDFirstProcess collapse in" style="">. But that matters little for TDX; just remember that the box will remember the last state it was in when you updated or submitted the article.

 

 

Return to the Article Table of Contents above

 

Issues Experienced

The TDX HTML parser is very aggressive, which lends to the source code becoming corrupt from time to time. 

  • Button raised or lowered from the example neutral spot above.
    • Something has gone wrong with the line of code that the button info is programmed on.
    • Sometimes this will exhibit in the source where that line, while set on one line in the above examples, is split into two lines.
    • Correct the line so it is referenced like the examples above
    • or rebuild the box from the template and copy the content to the new box.
  • Content initially entered into the box shows outside the box and overlaid on top of other content.
    • Source is corrupt: add a new box from template, copy content to new box, delete the broken box.

 

Return to the Article Table of Contents above

 

Reference

Bootstrap Collapse (w3schools.com)

Bootstrap Panels (w3schools.com) (Change panel color)

Bootstrap Buttons (w3schools.com) (Change button color)

Non breaking space used to expand button boarder > <

Arrow Symbols: Left, Right, Up and Down Arrow (alt-codes.net)

Article - HTML Content Allowlists (teamdynamix.com)

Font Awesome 

 

 

Return to the Article Table of Contents above

 

Print Article