Add expand and collapse functionality to any Knowledge article

[Lokenath Chakra]

HTML5 provides a way to create this expand/collapse feature with just a few lines of HTML and no JavaScript insight. And this can be done by the details and summary tags.

Working example

Click here to toggle me

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

The <details> tag

There are two relevant elements here: <details> and, optionally, <summary>. <details> is the wrapper for all the content we want to show and hide, and <summary> contains the — well, the summary and title of the section. Technically we don’t need the summary. If absent, the browser will use some default text (in Chrome: “details”). Let’s have a look at some markup:

<details>
  <summary>Show/Hide me</summary>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</details>

 Output 

Show/Hide me

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

 It’s a simple example, but it shows off the toggle effect nicely. All this without JavaScript! 

The open attribute

In the example above, the content is hidden when the page loads. We can make it visible by default by adding the boolean open attribute to the <details> element 

<details open>
  <summary>Show/Hide me</summary>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</details>

Output

Show/Hide me

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas

 There is no closed attribute. It’s the default, so by omitting open, you imply closed.

The <summary> tag

The<summary> tag defines a visible heading for the <details> element. The heading can be clicked to view/hide the details.

Implementation in ServiceNow

• Open the article where expand / collapse functionality needs to be added.
• Click on source code button on TinyMCE editor.

         

• Add details and summary tags where ever required.

           

• Save the record and view the article. 

          

The use of these tags is just not limited to articles, but it can also be used in ServiceNow Community, questions or wherever ServiceNow HTML editor is used. 

Note: <details> and <summary> tags aren't supported in IE.