■
Often you may have a page containing a lot of text, such as an article or blog post you're sharing on the intranet. It may be helpful for your End users to expand and collapse the text on-screen so it's not overly long. The code view in your text editor allows you to add custom HTML to your page.
Collapsible text
Here is an example of HTML to add collapsible content. Copy and paste the code below into your own content, then fill in the text with your own summary and details.
<h2>Collapsible Text. Add Your Title Here</h2> <p>Click each topic to expand the section. Add your summary here</p>
<details> <summary>
<h3 style=”cursor:pointer”>Open Section 1</h3>
</summary> <p>Details here</p> </details> <details> <summary>
<h3 style=”cursor:pointer”>Open Section 2</h3>
</summary> <p>Details here</p> </details> <details> <summary>
<h3 style=”cursor:pointer”>Open Section 3</h3>
</summary> <p>Details here</p>
</details>
Output will look like this:
Collapsed:
Expanded:
Comments
Hi!
This was a life saver. Thanks for the valuable info.
Can you please tell me how do I add a "+" sign to the summary which turns into "-" when the paragraph expands. That way users will know that the paragraph is expandable, and that once it opens, it can collapse back. Looking forward to your reply!
Thanks!
Rajat
Hi Rajat! Thanks for the comment. Adding a plus symbol that turns into a minus symbol would require some custom CSS in your page, which Simpplr does not support, nor recommend. However, you are able to add a plus and/or minus icon in place of "Click here to see more..." In your code view, adding + will give you a plus icon, and ± will give a plus/minus icon.
Hello! I added the expand/collapse code to help simplify one of my long pages. However, the system seems to have also added a lot of random-looking code around my code, which is putting a lot of extra space around these sections. I can't delete the extra spaces or code without messing things up. I'm happy to share screenshots of what's happening if I could do that somehow. Or, should I open a ticket?
Hey Michelle. Go ahead and open a ticket with our Support team. That way you can add screenshots. With commenting on the articles like this, there is no way to do that. If you'd like, you can also ask them to include me in the case so I can take a look at the code, but I'm sure one of our team members will be able to help you out! Thanks.
Will do, Matthew! Thanks.
Having the same issue as Michelle below - has a better solution or fix been created since? Should I submit a ticket? Is there a plan to add this as a more user-friendly feature? This works OK if you have simple content but with the longer or formatted content it's much harder to navigate the code and it's wasting a lot of our team's time.
Hi Lauren. Unfortunately we don't yet have a more user friendly way to do this yet. There is a product enhancement request for built-in collapsable text, but it's currently not on the roadmap. The instructions in this article are meant to be a workaround, and admittedly not a great one. The code sometimes changes itself automatically after you manually input it, so that's worth looking at. But if your teams are using this workaround a lot for long content, it may be worth just leaving the content as is or shortening it to be more easily consumed. I wish I had better news!
Please sign in to leave a comment.