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
- 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.
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):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: