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! 

[derekdoctors]

Apologies if it's bad etiquette to reply to this purely to bump it up, but i'd really appreciate some guidance from someone a bit more in the know.

Expand/collapse functionality is really useful for us in lengthy knowledge articles as it helps the user parse subsections more easily, but it takes us a lot more time to create and edit the knowledge articles due to the HTML involved... hoping one day for a SNow solution 🙂 

[PClements100]

Hi Derek.

Having this as part of Tiny MCE would be great. Here's what I have done; I've added CSS in <style></style> tags at the bottom of my articles. I created a standard template and had people always use that, included in the CSS was some styling applied when the Summary/Details tags are used to easily create collapsing sections, We only use Edge and Chrome and it's works fine for us.

Here is what it looks like;

Here is the code I use (I use :root to set my colours, change the color variables to hex values of your own)

<style>
details > summary {
  list-style: none;
  color: var(--blue);
  font-size:1.2em;
  text-decoration: none;
  text-transform: capitalize;
  font-weight: 1000;
  padding: 12px 15px 10px 15px;
  margin-bottom: 0px;
  background-color: var(--platinum);
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  }
summary:hover {
  color: var(--white);
  background-color: var(--blue);
  }
summary > open {
  color: var(--black);
  background-color: var(--blue);
  }
summary:after {
float: right;
  content: " ✙";
}
details[open] > summary:after {
float: right;
  content: " ⚊";
}

details {
  margin-top: 5px;
  margin-bottom: 10px;
  }
details > div {
  border: 1px solid #f3f3f3;
  border-radius: 4px;
  margin-top: 0;
  padding: 1rem;
  animation: fadeIn 0.5s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
</style>

Note that in my case, I add a <div></div> to wrap the paragraph - this adds the text border and spacing;

<details>
<summary>Epcot Center</summary>
<div><p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p></div>
</details>

Recently, I have discovered that I can include all my CSS in the Default Value of the Dictionary for Article Body, so even if someone doesn't apply a template, it will use these settings. The aesthetics of the articles in my knowledge base are now so much better.

Hope this helps. It took me a long time figuring this stuff out. 🙂

[wow-on-now]

Expand-Collapse on ServiceNow Knowledge with Amaze - Watch Video

[Rachel38]

I'd also like to know more about this. Knowledge owners find it difficult to update articles where Knowledge Managers have used html to add expanding/collapsing sections. Having the functionality built into the in-editor would be so helpful in the ongoing maintenance of articles.