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 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:

Was this article helpful?
4 out of 4 found this helpful
Have more questions? Submit a request

Comments

9 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

    0
    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.

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

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

    0
    Comment actions Permalink
  • Will do, Matthew! Thanks.

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

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

    0
    Comment actions Permalink
  • I think the issue people may be having is that <summary> doesn't work here. If you do it as shown above it just does nothing in a Simpplr page (page I tried it on is the original with the hmtl tab). If you use it like this...

    <details><summary> NEW LABEL</summary> it shows the custom label BUT the expansion itself doesn't show. 

    The only thing that works for me is leaving out <summary> completely and just living with the "Details" label. 

    All of that said - is there an update on adding this to the new text editor because with the new text editor this can require even more use of HTML. With the old one, you only had to tell people where to insert <details> and /<details> because they could put it in code view. In the new one they have to format EVERYTHING in between which means adding in most cases <ul> and <li> etc. Which makes it much less user-friendly. 

    0
    Comment actions Permalink
  • Hey Lori. Sorry to hear you're havng trouble with this feature. You shouldn't have to be an HTML expert to do the things you want to to when building out content. Good news is, we're planning on rolling out text accordions in the upcoming 24.01 release (January 2024)! That will make all of this custom HTML irrelevant, and with a click of a button, you'll be able to add expandables/collapsables to your headers and content. 

    0
    Comment actions Permalink

Please sign in to leave a comment.

Articles in this section

See more