This site requires JavaScript to be enabled
Welcome Guest|
Recent searches
IE BUMPER

Expandable Sections to Knowledge Articles

Number of views : 11
Article Number : KB0015540
Published on : 2019-02-20
Last modified : 2020-05-06 21:51:30
Knowledge Base : ServiceNow - Public Self Help

The information in this article can be used for knowledge articles, service pages, and any content in ServiceNow.


Single-Level Expandable List

Level 1

Content

  • List Item 1
  • List Item 2
  • List Item 3

Tutorial:

  1. Start by creating a new knowledge article or by editing an existing article
  2. Open the "edit" screen for your knowledge article and scroll down to the rich-text editor
  3. Copy the HTML Code Template for a Single-Level Expandable List below (from <div class="panel list-group"> to </div>)
  4. Navigate back to the edit screen of your knowledge article and click on the "source code" button in the text box toolbar - 
  5. Within the source code pop-up box, find the location in your article for where you would like to place the single-level expandable list and "Right Click + Paste" or "Ctrl-V"
  6. Change the "Level 1" link text by finding "Level 1" in the template source code and replace it with what you would like the list heading to say
  7. Click OK and your text box should now contain the template content
  8. Change the "content" and "list item" placeholders to your content
  9. To create multiple expandable lists within the same article, follow steps 5-8 above, changing all instances of a1 to a2. The next list would use a3, and so on.
  10. Click "Save"

Note: if the expandable list does not function after editing the "content" placeholders, re-copy the template code and paste it into the source code again, then edit the content within the source code pop-up box rather than in the rich-text editor.

HTML Code Template:

<div class="panel list-group">
<a class="list-group-item" href="#a1" data-toggle="collapse" data-target="#a1">Level 1</a>
<div id="a1" class="collapse">
<div class="list-group-item">
<p>Content</p>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
</div>
</div>

 

 

 

 

 

Thank You! Your feedback has been submitted.

Feedback