Can I create expandable and collapsable text in a page?

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. 

  1. 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.
  2. Open the code view in your WYSIWYG bar.
  3. At the beginning of your text, introduce two tags; 
  4. Then after your text "Click here for more..." close your <summary> tag. To close it, add 
  5. At the very end of your text, close the <details> tag with
    Your code should look like this:
  6. 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.
  7. 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.
Was this article helpful?
4 out of 4 found this helpful
Have more questions? Submit a request


  • 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!



    Comment actions Permalink
  • 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.

    Comment actions Permalink

Please sign in to leave a comment.

Articles in this section

See more