Expand/Collapse Long Text Solution (Video)

1

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

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!

3 Likes
2

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

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

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)

1 Like
4

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.

2 Likes
5

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

6

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?

7

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.

8

Thank you! This works like a charm.