API tools faq
paste
Guest User

Collapsible content

a guest
Dec 5th, 2022
56
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.70 KB | Source Code | 0 0
raw download clone embed print report
  1. <div><strong>Table of Contents<a id="TOC" name="TOC"></a></strong></div>
  2.  
  3. <ul>
  4.     <li><a href="#BoxExamples:2">Box Examples:</a>
  5.  
  6.     <ul>
  7.         <li>Expandable via Click on Header</li>
  8.         <li>Expandable via Button</li>
  9.         <li>Expandable via Check Box</li>
  10.     </ul>
  11.     </li>
  12.     <li><a href="#Howtocopyinto6">How to Copy Into Your Article</a></li>
  13.     <li><a href="#Multipleboxeswithinthe7">Multiple Boxes Within the Same Article</a></li>
  14.     <li><a href="#Default:ExpandedorCollapsed8">Default: Expanded or Collapsed</a></li>
  15.     <li><a href="#Issues">Issues Experienced</a></li>
  16.     <li><a href="#Reference9">Reference</a>
  17.     <ul>
  18.         <li>Button Size/Color</li>
  19.         <li>Panel Colors</li>
  20.         <li>HTML Allowed in TDX</li>
  21.     </ul>
  22.     </li>
  23. </ul>
  24.  
  25. <h2>Box Examples:<a id="BoxExamples:2" name="BoxExamples:2"></a></h2>
  26.  
  27. <div class="panel panel-primary">
  28. <div class="panel-heading" data-target=".IDClickHeader" data-toggle="collapse"><strong>Expandable Via Click on Header<label class="pull-right btn fa fa-expand fa-2x style=" style="color:white"> </label></strong></div>
  29.  
  30. <div aria-expanded="false" class="panel panel-body IDClickHeader collapse" style="height: 31.9886px;">
  31. <p>&nbsp;</p>
  32.  
  33. <div style="background:#eeeeee;border:1px solid #cccccc;padding:5px 10px;">
  34. <p><br />
  35. &lt;div class=&quot;panel panel-primary&quot;&gt;<br />
  36. &lt;div class=&quot;panel-heading&quot; data-target=&quot;.IDClickHeader&quot; data-toggle=&quot;collapse&quot;&gt;&lt;strong&gt;Panel Title&lt;label class=&quot;pull-right btn fa fa-expand fa-2x style=&quot; style=&quot;color:white&quot;&gt; &lt;/label&gt;&lt;/strong&gt;&lt;/div&gt;</p>
  37.  
  38. <p>&lt;div aria-expanded=&quot;false&quot; class=&quot;panel panel-body IDClickHeader collapse&quot; style=&quot;height: 31.9886px;&quot;&gt;<br />
  39. &lt;p&gt;Content goes here&lt;/p&gt;<br />
  40. &lt;/div&gt;<br />
  41. &lt;/div&gt;</p>
  42.  
  43. <p>&nbsp;</p>
  44. </div>
  45. </div>
  46. </div>
  47.  
  48. <p><!------------------------------------------------------Example Button------------------------------------------------------></p>
  49.  
  50. <div class="panel panel-primary">
  51. <div class="panel-heading"><strong>Expandable via Button</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>
  52.  
  53. <div aria-expanded="false" class="panel panel-body IDFirstProcess collapse" style="height: 31.9886px;">
  54. <div style="background:#eeeeee;border:1px solid #cccccc;padding:5px 10px;">
  55. <div>
  56. <p><br />
  57. &lt;div class=&quot;panel panel-primary&quot;&gt;</p>
  58.  
  59. <p><br />
  60. &lt;div class=&quot;panel-heading&quot;&gt;&lt;strong&gt; HEADING HERE &lt;/strong&gt;&lt;label class=&quot;pull-right gutter-bottom-none &quot; style=&quot;font-weight: normal&quot;&gt;&lt;input checked=&quot;unchecked&quot; class=&quot;btn btn-default &quot; data-target=&quot;.IDFirstProcess&quot; data-toggle=&quot;collapse&quot; type=&quot;button&quot; value=&quot;&emsp;◄&emsp;Show/Hide&emsp;&quot; /&gt;&lt;/label&gt;&lt;/div&gt;</p>
  61.  
  62. <p>&lt;div aria-expanded=&quot;true&quot; class=&quot;panel panel-body IDFirstProcess collapse&quot; style=&quot;&quot;&gt;</p>
  63.  
  64. <p><br />
  65. &lt;p class=&quot;gutter-top-none&quot;&gt;BODY HERE&lt;/p&gt;<br />
  66. &lt;/div&gt;<br />
  67. &lt;/div&gt;</p>
  68. </div>
  69. </div>
  70.  
  71. <p>&nbsp;</p>
  72. </div>
  73. </div>
  74.  
  75. <p><!------------------------------------------------------Example check box------------------------------------------------------></p>
  76.  
  77. <div class="panel panel-warning">
  78. <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>
  79.  
  80. <div aria-expanded="false" class="panel panel-body IDFirstCheckBox collapse" style="height: 31.9886px;">
  81. <p class="gutter-top-none">&nbsp;</p>
  82.  
  83. <div class="gutter-top-none" style="background:#eeeeee;border:1px solid #cccccc;padding:5px 10px;">
  84. <p>&nbsp;</p>
  85.  
  86. <p>&lt;div class=&quot;panel panel-warning&quot;&gt;</p>
  87.  
  88. <p><br />
  89. &lt;div class=&quot;panel-heading&quot;&gt;&lt;strong&gt;Expandable Via Check Box&lt;/strong&gt;&lt;label class=&quot;pull-right gutter-bottom-none checkbox-inline text-info&quot; style=&quot;font-weight: normal&quot;&gt;&lt;input checked=&quot;checked&quot; data-target=&quot;.IDFirstCheckBox&quot; data-toggle=&quot;collapse&quot; type=&quot;checkbox&quot; /&gt;Hide&lt;/label&gt;&lt;/div&gt;</p>
  90.  
  91. <p>&lt;div aria-expanded=&quot;true&quot; class=&quot;panel panel-body IDFirstCheckBox collapse in&quot; style=&quot;&quot;&gt;<br />
  92. &lt;p class=&quot;gutter-top-none&quot;&gt;Table body&lt;/p&gt;</p>
  93.  
  94. <p>&lt;p class=&quot;gutter-top-none&quot;&gt;&amp;nbsp;&lt;/p&gt;<br />
  95. &lt;/div&gt;<br />
  96. &lt;/div&gt;<br />
  97. &nbsp;</p>
  98. </div>
  99.  
  100. <p class="gutter-top-none">&nbsp;</p>
  101. </div>
  102. </div>
  103.  
  104. <p>&nbsp;</p>
  105.  
  106. <p>&nbsp;</p>
  107.  
  108. <p><a href="#TOC">Return to the Article Table of Contents above</a></p>
  109.  
  110. <p>&nbsp;</p>
  111.  
  112. <h2>How to Copy Into Your Article<a id="Howtocopyinto6" name="Howtocopyinto6"></a></h2>
  113.  
  114. <ol>
  115.     <li>Edit your article</li>
  116.     <li>Set your mouse cursor where you wish to enter the box</li>
  117.     <li>Select templates from the KB editor menu</li>
  118.     <li>From the Templates menu, select Collapsible Content</li>
  119.     <li>Remove any Panels you do not want, remove the info text above the panels.</li>
  120.     <li>Edit the Heading/Title and Body of the box to contain the desired content.&nbsp;</li>
  121. </ol>
  122.  
  123. <p style="margin-left: 40px;"><img alt="" src="https://skagit.teamdynamix.com/TDPortal/Images/Viewer?fileName=4bce3bcf-d80c-41fb-9829-d720f14858da.png" style="border-width: 1px; border-style: solid; width: 550px; height: 240px;" /></p>
  124.  
  125. <p>&nbsp;</p>
  126.  
  127. <p>&nbsp;</p>
  128.  
  129. <p>&nbsp;</p>
  130.  
  131. <p><a href="#TOC">Return to the Article Table of Contents above</a></p>
  132.  
  133. <p>&nbsp;</p>
  134.  
  135. <h2>Multiple Boxes Within the Same Article<a id="Multipleboxeswithinthe7" name="Multipleboxeswithinthe7"></a></h2>
  136.  
  137. <div>
  138. <p>The boxes are hard coded to data-target ID, so if you want to use more than one in the same KB article&nbsp;you will have to change the ID for each box.</p>
  139.  
  140. <p>Failure to do so will prevent subsequent boxes from being expanded/collapsed.&nbsp;</p>
  141.  
  142. <ul>
  143.     <li>
  144.     <div>Change the <span style="background-color:#afeeee;">Data-Target Tag ID</span> to be unique across all boxes.</div>
  145.     </li>
  146.     <li>
  147.     <div>Change the <span style="background-color:#dda0dd;">Class Panel Panel-Body Tag ID</span> to match that box&#39;s Data-Target ID.</div>
  148.     </li>
  149.     <li>
  150.     <div>Note: The ID&#39;s are case sensitive and must match case between both tags.&nbsp;</div>
  151.  
  152.     <ul>
  153.         <li>
  154.         <div>And, for some reason I keep finding the case incorrect even though I&#39;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?</div>
  155.         </li>
  156.     </ul>
  157.     </li>
  158.     <li>
  159.     <div>Example:</div>
  160.  
  161.     <ul>
  162.         <li>
  163.         <div>First Box:</div>
  164.  
  165.         <ul>
  166.             <li>
  167.             <div>&lt;div class=&quot;panel-heading&quot;&gt;&lt;strong&gt;HEADING HERE &lt;/strong&gt;&lt;label class=&quot;pull-right gutter-bottom-none checkbox-inline&quot; style=&quot;font-weight: normal&quot;&gt;&lt;input checked=&quot;checked&quot; <span style="background-color:#afeeee;">data-target=&quot;.ID</span><span style="background-color:#ffff00;">FirstProcess</span>&quot; data-toggle=&quot;collapse&quot; type=&quot;checkbox&quot; /&gt;Hide&lt;/label&gt;&lt;/div&gt;</div>
  168.             </li>
  169.             <li>
  170.             <div>&lt;div aria-expanded=&quot;false&quot; <span style="background-color:#dda0dd;">class=&quot;panel panel-body ID</span><span style="background-color:#ffff00;">FirstProcess</span><span style="background-color:#ffff00;"> </span>collapse&quot; style=&quot;height: 32px;&quot;&gt;</div>
  171.             </li>
  172.         </ul>
  173.         </li>
  174.         <li>
  175.         <div>Second Box:</div>
  176.  
  177.         <ul>
  178.             <li>
  179.             <div>&lt;div class=&quot;panel-heading&quot;&gt;&lt;strong&gt;HEADING HERE &lt;/strong&gt;&lt;label class=&quot;pull-right gutter-bottom-none checkbox-inline&quot; style=&quot;font-weight: normal&quot;&gt;&lt;input checked=&quot;checked&quot; <span style="background-color:#afeeee;">data-target=&quot;.ID</span><span style="background-color:#ffff00;">SecondProcess</span>&quot; data-toggle=&quot;collapse&quot; type=&quot;checkbox&quot; /&gt;Hide&lt;/label&gt;&lt;/div&gt;</div>
  180.             </li>
  181.             <li>
  182.             <div>&lt;div aria-expanded=&quot;false&quot; <span style="background-color:#dda0dd;">class=&quot;panel panel-body ID</span><span style="background-color:#ffff00;">SecondProcess</span><span style="background-color:#ffff00;"> </span>collapse&quot; style=&quot;height: 32px;&quot;&gt;</div>
  183.             </li>
  184.         </ul>
  185.         </li>
  186.     </ul>
  187.     </li>
  188. </ul>
  189. </div>
  190.  
  191. <div>&nbsp;</div>
  192.  
  193. <p>&nbsp;</p>
  194.  
  195. <p><a href="#TOC">Return to the Article Table of Contents above</a></p>
  196.  
  197. <p>&nbsp;</p>
  198.  
  199. <h2>Default: Expanded or Collapsed<a id="Default:ExpandedorCollapsed8" name="Default:ExpandedorCollapsed8"></a></h2>
  200.  
  201. <div>
  202. <p>TDX&nbsp;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.</p>
  203.  
  204. <p>&nbsp;</p>
  205.  
  206. <p>The actual HTML&nbsp;code uses &gt; in &lt; after the collapse in panel panel-body to designate an expanded by default panel:&nbsp;&lt;div aria-expanded=&quot;true&quot; class=&quot;panel panel-body IDFirstProcess collapse <span style="background-color:#ffff00;">in</span>&quot; style=&quot;&quot;&gt;. 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.</p>
  207.  
  208. <p>&nbsp;</p>
  209. </div>
  210.  
  211. <p>&nbsp;</p>
  212.  
  213. <p><a href="#TOC">Return to the Article Table of Contents above</a></p>
  214.  
  215. <p>&nbsp;</p>
  216.  
  217. <h2>Issues Experienced<a id="Issues" name="Issues"></a></h2>
  218.  
  219. <p>The TDX&nbsp;HTML&nbsp;parser is very aggressive, which lends to the source code becoming corrupt from time to time.&nbsp;</p>
  220.  
  221. <ul>
  222.     <li>Button raised or lowered from the example neutral spot above.
  223.     <ul>
  224.         <li>Something has gone wrong with the line of code that the button info is programmed on.</li>
  225.         <li>Sometimes this will exhibit in the source where that line, while set on one line in the above examples, is split into two lines.</li>
  226.         <li>Correct the line so it is referenced like the examples above</li>
  227.         <li>or rebuild the box from the template and copy the content to the new box.</li>
  228.     </ul>
  229.     </li>
  230.     <li>Content initially entered into the box shows outside the box and overlaid on top of other content.
  231.     <ul>
  232.         <li>Source is corrupt: add a new box from template, copy content to new box, delete the broken box.</li>
  233.     </ul>
  234.     </li>
  235. </ul>
  236.  
  237. <p>&nbsp;</p>
  238.  
  239. <p><a href="#TOC">Return to the Article Table of Contents above</a></p>
  240.  
  241. <p>&nbsp;</p>
  242.  
  243. <h2>Reference<a id="Reference9" name="Reference9"></a></h2>
  244.  
  245. <p><a href="https://www.w3schools.com/Bootstrap/bootstrap_collapse.asp">Bootstrap Collapse (w3schools.com)</a></p>
  246.  
  247. <p><a href="https://www.w3schools.com/Bootstrap/bootstrap_panels.asp">Bootstrap Panels (w3schools.com)</a>&nbsp;(Change panel color)</p>
  248.  
  249. <p><a href="https://www.w3schools.com/Bootstrap/bootstrap_buttons.asp">Bootstrap Buttons (w3schools.com)</a>&nbsp;(Change button color)</p>
  250.  
  251. <p>Non breaking space used to expand button boarder &gt;&emsp;&lt;</p>
  252.  
  253. <p><a href="https://www.alt-codes.net/arrow_alt_codes.php">Arrow Symbols: Left, Right, Up and Down Arrow (alt-codes.net)</a></p>
  254.  
  255. <p><a href="https://solutions.teamdynamix.com/TDClient/1965/Portal/KB/ArticleDet?ID=48230">Article - HTML Content Allowlists (teamdynamix.com)</a></p>
  256.  
  257. <p><a href="https://fontawesome.com/v4/icons/">Font Awesome&nbsp;</a></p>
  258.  
  259. <p>&nbsp;</p>
  260.  
  261. <p>&nbsp;</p>
  262.  
  263. <p><a href="#TOC">Return to the Article Table of Contents above</a></p>
  264.  
  265. <p>&nbsp;</p>
  266.  
Tags: html kb
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!