Expand/Collapse text within knowledge articles

derekdoctors
Tera Contributor

‎06-13-2023 06:55 AM

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! 

  • 6,228 Views
17 REPLIES 17

Kim27
Tera Guru
In response to Leri Andrews

‎08-01-2023 09:01 AM

Personally I think any article that is long enough to need accordions needs a rethink.  They're useful on mobile devices but otherwise forcing users to rely on their understanding of a sub-heading and clicking seems counterproductive. However, I too would like the option to be available!

I agree with this until I started to work on more complex engineering articles. They tend to be long, multi-step processes. The accordion feature allows you to only open the step of the process you are currently working through without the risk of accidentally jumping ahead or repeating a step you've already completed. For these KAs, each step in the process contains many sub-steps.

 

I've also used it in articles where there are different steps based on mobile phone (iPhone vs. Android) or steps based on browser type.  

mbernste
Tera Contributor

‎08-01-2023 09:13 AM

We've been using a collapsible FAQ template, whose code I believe I found in this community.  Having a collapsible FAQ is great for those who want to skim an FAQ but not read through every question.  By default, every "answer" is collapsed so that all the reader sees is a list of questions and when they want to read the answer, they just expand it.

Peter Bean
Tera Contributor

‎08-17-2023 04:16 PM

Here's some code i use on a near regular basis-

1. TITLE to two drop downs

PeterBean_0-1692313934312.png

CODE:

 

<!-- Tile Row -->
<p>
    <!-- Tile 1 -->
    <span style="color: black; background-color: #218fa3; font-size: 16pt; font-family: 'Arial Narrow', sans-serif; font-weight: bold;">
        <a class="list-group-item"
           style="color: #ffffff; background-color: #218fa3;" href="#a000" data-toggle="collapse" data-target="#a000">
            <img src="<URL HERE>" />
            TITLE
        </a>
    </span>
</p>

<!-- Collapsible Section 1 -->
<div id="a000" class="collapse">
    <div class="list-group-item">
        <!-- Header 1 -->
        <p>
            <span style="color: black; background-color: #484545; font-size: 16pt; font-family: 'Arial Narrow', sans-serif; font-weight: bold;">
                <a class="list-group-item"
                   style="color: #ffffff; background-color: #484545;" href="#a001" data-toggle="collapse" data-target="#a001">
                    <img src="<IMG HERE>" />
                    Header 1
                </a>
            </span>
        </p>
        <!-- Content 1 -->
        <div id="a001" class="collapse">
            <div class="list-group-item-flush">
                <!-- Content for Header 1 -->
                <p style="margin: 0cm -0.05pt 8pt -0.55pt; line-height: 115%; font-size: 10pt; font-family: Arial, sans-serif; color: black;"><br /></p>
                <p style="margin-right: 0cm; margin-left: 0cm; font-size: 11pt; font-family: Calibri, sans-serif;"><br /></p>
                <p><br /></p>
            </div>
        </div>
        <!-- Header 2 -->
        <p>
            <span style="color: black; background-color: #b5b0a9; font-size: 16pt; font-family: 'Arial Narrow', sans-serif; font-weight: bold;">
                <a class="list-group-item"
                   style="color: #ffffff; background-color: #b5b0a9;" href="#a002" data-toggle="collapse" data-target="#a002">
                    <img src="<IMG HERE>" />
                    Header 2
                </a>
            </span>
        </p>
        <!-- Content 2 -->
        <div id="a002" class="collapse">
            <div class="list-group-item-flush">
                <!-- Content for Header 2 -->
                <p style="margin: 0cm -0.05pt 8pt -0.55pt; line-height: 115%; font-size: 10pt; font-family: Arial, sans-serif; color: black;"><br /></p>
                <p style="margin-right: 0cm; margin-left: 0cm; font-size: 11pt; font-family: Calibri, sans-serif;"><br /></p>
                <p><br /></p>
            </div>
        </div>
    </div>
</div>

 

 

Or if you want just a singular drop down

PeterBean_1-1692314170268.png

 

 

CODE:

<!-- 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;" href="#a01"
            data-toggle="collapse" data-target="#a01"><img
                src="<IMG HERE>" /> TITLE OF
            SECTION</a></span></strong></h2>
<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 -->
<str><strong></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;" href="#a02"
            data-toggle="collapse" data-target="#a02"><img
                src="<IMG HERE>" /> TITLE OF
            SECTION</a></span></strong></h2>
<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>
 

helpmepls23
Tera Contributor
In response to Peter Bean

‎08-30-2023 07:44 AM

Hi Peter! This is amazing, I have a question. Whenever I click on the collapsible header, it defaults to going past the actual content. 

For example, I click on "row 1" and the content opens, but the page jumps down to the bottom of the content, so I have to scroll all the way back up to see everything. How can I code it so it doesn't jump down?

0 Helpfuls

Peter Bean
Tera Contributor
In response to helpmepls23

‎09-03-2023 06:36 PM

Funny you ask that i noticed that too but never figured out why, then i just had a thought hey i'll ask chatgpt

 

here's 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:

  1. Remove the href attribute from your links.
  2. 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>

 

 

0 Helpfuls