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

Comments

0 comments

Please sign in to leave a comment.

Articles in this section

See more