■
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 WYSIWYG bar allows you to add custom HTML to your page.
Follow the steps below to add an expandable/collapsible to the text in your page.
- Input your text in the page. At the point where you want to introduce the expand/collapse function, we recommend writing "Click here for more" or something similar. See the example below.
- Open the code view in your WYSIWYG bar.
- At the beginning of your text, introduce two tags;
<details>
and<summary>
- Then after your text "Click here for more..." close your <summary> tag. To close it, add
</summary>
- At the very end of your text, close the <details> tag with
</details>
Your code should look like this:
- Close your code view to go back to the text. Click the "Click here for more..." text to see the rest of the page content expand. Click it again to collapse it.
- Publish your page as you normally would. In the final version of the page, test the function again to ensure it will work for your End users.
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.