Using Toggles in Knowledge Base Articles

Anatomy of a toggle

<div class="expander expander1" data-collapse="data-collapse"> <!--"parent" div--> <h3>Click me to toggle!</h3> <div> <!--"child" div--> Anything inside the "child div" will be toggled when you click the h3! </div> <!--closes the child div--> </div> <!--closes the parent div-->

• The top div, with class="expander expander1" in it, is the "parent div". It tells the page "we're about to use toggles!"
• The h3 tag, inside the parent div, is the text that you click to open/close the toggle.
• The second div, that doesn't have the class in it, is the "child div." Anything inside this div will appear/disappear when you click the h3.

Test it out!

Sub-toggles

Using the same logic, you can put a toggle inside a toggle using the class "expander expander2" (note: The line numbers at the left were added for clarity. You don't need to actually add them in your HTML): 1 <div class="expander expander1" data-collapse="data-collapse"> 2 <h3>Top-level toggle</h3> <!--text that triggers top-level toggle--> 3 <div> 4 This text appears after you click the top-level toggle, and the "Sub-Toggle" text appears underneath it. 5 <div class="expander expander2" data-collapse="data-collapse"> <!-- creates container for sub-toggle--> 6 <h3>Sub-Toggle</h3> <!--text that triggers sub-toggle--> 7 <div> 8 This text appears after you click the sub-toggle. 9 </div> <!--closes div on line 7--> 10 </div> <!--closes div on line 5--> 11 </div> <!--closes div on line 3--> 12 </div> <!--closes div on line 1, tells page we're done with toggles--> Here's what it looks like rendered on the page:

Sub-sub-toggles

Now that you know the anatomy of a toggle, and how to embed a sub-toggle, check the HTML of this article to see how to do sub-sub-toggles!
Example: