Knowledge Base Collapsible Content

How to make collapsibles in the Knowledge Base to save space and make long pages more readable.

Want to make it so that people click on a title and that opens up some text? (Here's an example of that kind of article.) Well... it's a little fiddly, but here's how you work with that.

Add a Collapsible to Your Guide

1. With your cursor in the location that you'd like to have a collapsible, click on the Templates menu in the toolbar above the editing box
2. Select the Collapsible Template

This will add a template for two collapsibles to your guide.

• If you need more than two collapsibles, simply add more Collapsible Templates.
• If you need fewer collapsibles, put your cursor into the extra collapsible and delete it (sometimes this goes wonky... see the Editing Collapibles section below for tips)

As you use these Collapsibles, please keep the text in the title section that says to click to show/hide content. This is a usability aid for screen reader software.

Editing Collapsibles

These Collapsibles are not features developed by TDX for the Knowledge Base. Instead, they're an HTML template we added to meet local needs. Because of this, editing these add-on templates in the KB can be a bit fiddly. Here are some tips:

• Click into the TITLE GOES HERE section and delete that text (not the "click to show/hide" text, which is a usability aid for screen readers) to replace it with your own. Don't be freaked out by the fact that clicking into the title opens and closes the content... we can't turn that function off.
• Click into the CONTENT GOES HERE section and delete that text to replace it with your own
• Deleting or moving an entire Collapsible section can sometimes make the formatting on the guide go wonky. This is because TDX doesn't know all the code that goes into making the guide and so it can't make smart decisions about which code it's deleting. If this happens to you, you can either submit a ticket to the TDX Knowledge Base - CC group and we'll take a look at it for you, or you can click on the Source menu in the editing toolbar to look at the HTML code yourself. You're looking for <div name="collapsible" style="margin-left:25px;"> , <details open=""> , and <summary style="cursor:pointer;display:list-item;">. Everything between these opening HTML tags and their closing tags (</div>, </details>, and </summary>) are the collapsible. Most likely, one or more of these sections got left behind when you deleted content, and so you'll have to delete that extra code manually.

Changing the Heading Level of the Title

If you just add a heading tag, it will create a new line and mess up the formatting, so this takes a couple steps

1. replace the <strong> tag (right before title) with <h3 style="display:inline"> and replacing h3 with whichever heading level you need. 
   1. h3 means heading 3. 
2. replace </strong> at the end of the title with </h3> (or whichever level you used)

Credits

Hat tip to Sam Lengyel '25, for developing and testing the guts of this code!