# Expand/Collapse Long Text Solution (Video)

**URL:** https://community.glideapps.com/t/expand-collapse-long-text-solution-video/57839
**Category:** Ask for Help
**Created:** [February 12, 2023, 5:02pm UTC](https://community.glideapps.com/t/expand-collapse-long-text-solution-video/57839 "2023-02-12T17:02:30Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![nocodeapps99](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nocodeapps99/32/49507_2.png) [@nocodeapps99](https://community.glideapps.com/u/nocodeapps99)
#### Post date: [February 12, 2023, 5:02pm UTC](https://community.glideapps.com/t/expand-collapse-long-text-solution-video/57839/1 "2023-02-12T17:02:30Z")

</div>

Hi! I couldn’t find a solution with expand/collapse long text in glide so I did my own solution with Rich Text and HTML tags.

If anybody is intersted in this feature I’ll share my solution’s detailed descripition.

Thank you)

[Expand/Collapse Long Text](https://www.loom.com/share/00badcce496544a4ac7f7f0f97640fa1)

Here is the solution:

I create all columns in Users table.

We have a rawText column with a raw long text.

Data Editor

1. Truncate Text column (Col1) to truncate needed amount of symbols of rawText column.
2. Template column (Col2) of Col1 to expand:  
`Col1<span Style="font-weight:bold; color:#D63DC2; float:right">Expand</span>`
3. Template column (Col3) of rawText column to collapse:  
`Col1<span Style="font-weight:bold; color:#D63DC2; float:right">Collapse</span>`
4. Boolean column IsExpanded?

Layout

1. RichText1 component.  
Data: Col2.  
Visibility: Show component when IsExpanded? is not checked  
Action: Set Column Values in User Profile → IsExpanded? → True

2. RichText2 component.  
Data: Col3.  
Visibility: Show component when IsExpanded? is checked  
Action: Set Column Values in User Profile → IsExpanded? → False

That’s all folks!

Best regards!

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [February 13, 2023, 12:21am UTC](https://community.glideapps.com/t/expand-collapse-long-text-solution-video/57839/2 "2023-02-13T00:21:21Z")

</div>

I think an alternative for you here is to use the combination of details - summary HTML tags. However it’s not the exact behaviour of “click to see more” since the summary tag doesn’t disappear when you expand.

Check this out:

> **Click to expand**
>
> Content goes here

```auto
<details>
  <summary>Click to expand</summary>
  <p>Content goes here</p>
</details>

```

---

<div class="post-metadata">

### Author: ![nocodeapps99](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nocodeapps99/32/49507_2.png) [@nocodeapps99](https://community.glideapps.com/u/nocodeapps99)
#### Post date: [February 13, 2023, 9:56am UTC](https://community.glideapps.com/t/expand-collapse-long-text-solution-video/57839/3 "2023-02-13T09:56:45Z")

</div>

Thanks for your response! I saw this solution earlier, but it looks like more as menu element than a text. And you have to click a header each time to expand/collapse. Not a very convenient option for a long text. In my solution you can tap/click on text anywhere.

I think It’s a good option for a Q&A section, but doesn’t fit perfectly as a ‘read more’ feature.

So that’s why I create my solution. And somebody likes it already, so I’m glad to share)

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [February 13, 2023, 10:04am UTC](https://community.glideapps.com/t/expand-collapse-long-text-solution-video/57839/4 "2023-02-13T10:04:55Z")

</div>

You could get the same effect with a single component without needing any visibility conditions. Use an if-then-else column to dynamically toggle the content.

---

<div class="post-metadata">

### Author: ![nocodeapps99](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nocodeapps99/32/49507_2.png) [@nocodeapps99](https://community.glideapps.com/u/nocodeapps99)
#### Post date: [February 13, 2023, 10:10am UTC](https://community.glideapps.com/t/expand-collapse-long-text-solution-video/57839/5 "2023-02-13T10:10:27Z")

</div>

Thank you Darren! You are right. It makes this solution more effective. I appreciate your impact. Glide community is awesome!

---

<div class="post-metadata">

### Author: ![matt45](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/matt45/32/58759_2.png) [@matt45](https://community.glideapps.com/u/matt45)
#### Post date: [May 9, 2023, 4:56am UTC](https://community.glideapps.com/t/expand-collapse-long-text-solution-video/57839/6 "2023-05-09T04:56:47Z")

</div>

I partially understand how an if-then-else column could be used. How do you set up the action so that the user toggle the content?

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [May 9, 2023, 5:27am UTC](https://community.glideapps.com/t/expand-collapse-long-text-solution-video/57839/7 "2023-05-09T05:27:56Z")

</div>

I would have a User Specific boolean column, and then toggle the state of that with an action. The action would be:

- If User Specific column is empty, then  
– Set Column Values → User Specific Column → `true`
- Else  
– Set Column Values → User Specific Column → Clear value

And then the if-then-else column would return a different value, based on the state of the User Specific column.

---

<div class="post-metadata">

### Author: ![matt45](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/matt45/32/58759_2.png) [@matt45](https://community.glideapps.com/u/matt45)
#### Post date: [May 9, 2023, 7:10am UTC](https://community.glideapps.com/t/expand-collapse-long-text-solution-video/57839/8 "2023-05-09T07:10:35Z")

</div>

Thank you! This works like a charm.
