Expand/Collapse text within knowledge articles

[derekdoctors]

As a knowledge manager i've been using the guidance in this knowledge article to use some basic HTML code to provide expandable/collapsible text within my knowledge articles: 
https://www.servicenow.com/community/in-other-news/add-expand-and-collapse-functionality-to-any-know...

I've seen other posts which says that an in-editor expand/collapse feature is "in the roadmap" so I wanted to try and understand how long it may be before this feature is standard within the basic editor functions? It would be really useful and save a lot of time we're spending doing HTML coding for many paragraphs of text within an individual KA! 

[Peter Bean]

I had the same thought for a while and never thought hey i could ask chatgpt so i did, this is what it said-

The issue you're experiencing, where the page jumps down to the bottom of the content when clicking on the collapsible header, is likely due to the default behavior of anchor links (href="#a01" and href="#a02") in combination with the Bootstrap collapse functionality. When you click on the link, it navigates to the element with the corresponding id, which is why you're seeing the jump.

To prevent this behavior and make the collapse toggle without scrolling to the target element, you can do the following:

Remove the href attribute from your links.
Add a data-toggle attribute with the value "collapse" to your links.

Here's the modified code for the first and second rows:

<!-- First Row -->
<strong><span
        style="color: #ffffff; background-color: #c4004b; font-size: 14pt; font-family: 'Arial Narrow', helvetica, sans-serif;">
    <a class="list-group-item" style="color: #ffffff; background-color: #4aac51;"
       data-toggle="collapse" data-target="#a01"><img
            src="<IMG HERE>" /> TITLE OF SECTION</a>
</span></strong>
<div id="a01" class="collapse">
    <div class="list-group-item">
        <p><span style="font-family: arial, helvetica, sans-serif; font-size: 10pt;">WORDS WORDS</span></p>
        <p><span style="font-family: arial, helvetica, sans-serif; font-size: 10pt;">WORDS WORDS</span></p>
    </div>
</div>

<!-- Second Row -->
<strong><span
        style="color: #ffffff; background-color: #101c85; font-size: 14pt; font-family: 'Arial Narrow', helvetica, sans-serif;">
    <a class="list-group-item" style="color: #ffffff; background-color: #101c85;"
       data-toggle="collapse" data-target="#a02"><img
            src="<IMG HERE>" /> TITLE OF SECTION</a>
</span></strong>
<div id="a02" class="collapse">
    <div class="list-group-item">
        <p><span style="font-family: arial, helvetica, sans-serif; font-size: 10pt;">WORDS WORDS</span></p>
        <p><span style="font-family: arial, helvetica, sans-serif; font-size: 10pt;">WORDS WORDS</span></p>
    </div>
</div>

[dagidhussy]

We've implemented a collapsible FAQ template that I believe I discovered within this community. Utilizing a collapsible FAQ is highly beneficial for individuals who prefer to skim through the content rather than reading every question in detail. By default, all the "answers" are initially collapsed, presenting the reader with a concise list of questions. When they wish to access the answers, they can easily expand them. Visit for more.

[wow-on-now]

@derekdoctors Check out this video