Expand and collapse functionality not working as intended

helpmepls23 · ‎03-31-2023

I have multiple articles with collapsible sections using <details> per article here: Add expand and collapse functionality to any Knowl... - ServiceNow Community

But after upgrading to Tokyo we are running into this issue described by another user:

even though we are pasting the correct code, it keeps changing to this.

<details> <summary>Section 1</summary> </details>
 
 
 
<details> <summary>Section 2</summary> </details>

<details> <summary>Section 3</summary> </details>

We cannot get rid of the   and everytime we save an additional set of 3   is added

In addition, it will delete my last collapsible section content if i delete the last set of

Anyone know of any known fixes? Please help.

Sara N · ‎04-04-2023

I'm not aware of the fix for this, but we do have a couple of places where we've used collapsible sections, so I'm hoping someone else can resolve!

Lauren Methena · ‎04-06-2023

I haven't seen this issue.

Two thoughts - first, have you tried not using the tags around your <details><summary> tags? You don't technically need extra paragraph tags if you have <details> because that starts/ends your section. (just like if you use <table> or <ol>. You wouldn't use tags around those.)

Second thought - could the hygiene/HTML sanitizer in ServiceNow be affecting your coding? (Maybe the extra paragraph tags are triggering the extra coding?)

And one additional thought - are you editing directly in the source code or in the content wiki? When you delete the extra   in the source code, does it not work? Does the system still add the additional coding?

Another question - where are you copying/pasting the code from? When I copy/paste HTML code, I save the code in Notepad so there's no extra formatting. If you're copying/pasting from Word, it could be doing something weird to the source code?

Just thinking through the possible issues. I've had it where it adds "open" <details open="open"> to my code, but I'm always able to edit it in the source code, delete it, and save.

Let me know if ANY of this helps. Good luck! Anything else you can think of to give clues to this would be helpful. Thank you!

vhindbo · ‎04-25-2023

Thanks Lauren! Removing the tags worked. The content under the headings is no longer orphaned from the headings. (When I originally had the tags, </details> moved from after the content to before the content.)

Of course, there is still the issue of all those extraneous paragraphs. Each time a do a Save, two more sets of three paragraphs are added, one set before and one after my <details> tags.

Here's my original code:

<details> <summary>HEADER 1</summary>
content under heading 1
</details>
<details> <summary>HEADER 2</summary>
content under heading 2
</details>
<details> <summary>HEADER 3</summary>
content under heading 3
</details>

Here's the result after two Saves:

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><details> <summary>HEADER 1</summary> content under heading 1 </details><details> <summary>HEADER 2</summary> content under heading 2 </details><details> <summary>HEADER 3</summary> content under heading 3 </details></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

helpmepls23 · ‎04-25-2023

This is the exact issue I'm having.

I can write the code manually and not include but regardless it reappears after I save.