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
- Truncate Text column (Col1) to truncate needed amount of symbols of rawText column.
- Template column (Col2) of Col1 to expand:
Col1<span Style="font-weight:bold; color:#D63DC2; float:right">Expand</span>
- Template column (Col3) of rawText column to collapse:
Col1<span Style="font-weight:bold; color:#D63DC2; float:right">Collapse</span>
- Boolean column IsExpanded?
Layout
-
RichText1 component.
Data: Col2.
Visibility: Show component when IsExpanded? is not checked
Action: Set Column Values in User Profile → IsExpanded? → True
-
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
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>
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
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
Thank you Darren! You are right. It makes this solution more effective. I appreciate your impact. Glide community is awesome!
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?
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.
Thank you! This works like a charm.