Body
KB Article Detailing Panel Info:
Box Examples:
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
<div class="panel panel-warning">
<div class="panel-heading"><strong>Expandable Via Check Box</strong><label class="pull-right gutter-bottom-none checkbox-inline text-info" style="font-weight: normal"><input checked="checked" data-target=".IDFirstCheckBox" data-toggle="collapse" type="checkbox" />Hide</label></div>
<div aria-expanded="true" class="panel panel-body IDFirstCheckBox collapse in" style="">
<p class="gutter-top-none">Table body</p>
<p class="gutter-top-none"> </p>
</div>
</div>
Return to the Article Table of Contents above
How to Copy Into Your Article
- Edit your article
- Set your mouse cursor where you wish to enter the box
- Select templates from the KB editor menu
- From the Templates menu, select the box you wish to copy
- Edit the Heading 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)
Return to the Article Table of Contents above
First KB Template:
See article for editing and multiple boxes: skagit.teamdynamix.com/TDClient/2053/Portal/KB/ArticleDet?ID=143498
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.
Second KB Template:
See article for editing and multiple boxes: skagit.teamdynamix.com/TDClient/2053/Portal/KB/ArticleDet?ID=143498
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.