Using Toggles in Knowledge Base Articles

Many knowledge base (KB) articles include drop-downs, or toggles, which allow the reader to click text to expand a section of the article that would otherwise be hidden. We have two templates, "Test Page: Multiple Top-Level Toggles" and "Test Page: Sub-Toggles and Sub-Sub-Toggles" which you can use, but this article will also teach you to use the toggles' code so you can make your own specific "tree" of toggles.

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!

Click me to toggle!

Anything inside the "child div" will be toggled when you click the h3!

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:

Top-level toggle

This text appears after you click the top-level toggle, and the "Sub-Toggle" text appears underneath it.

Sub-Toggle

This text appears after you click the sub-toggle.

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:

Top-level toggle

This text appears after you click the top-level toggle, and the "Sub-Toggle" text appears underneath it.

Sub-Toggle

This text appears after you click the sub-toggle, and the "Sub-Sub-Toggle" text appears underneath it.

Sub-Sub-Toggle

This text only appears after if you clicked all the way down to the sub-sub-toggle.




Keywords:toggle div expander internal dropdown   Doc ID:88021
Owner:IT Support Center .Group:Northwestern
Created:2018-11-28 12:08 CDTUpdated:2019-09-16 00:50 CDT
Sites:Northwestern
Feedback:  0   0