In this guide, we will go over how to create an expandable textbox with state and actions. This is a great option if you want your text partially showing before expanding. If you don’t need this functionality, you can check out this guide for a simpler option.
- Add a box block to your page and add two text blocks inside of this box, one for the expandable text and one to act as the button.
- Select the text that will act as the button and navigate to the data tab. Select “+ new action” in the element actions section. Select “click” as the event and add this for the action:
state.openText = !state.openText
You can replace “openText” with anything. The action above will make the text open the expandable text block when clicked and close the expandable text block when clicked again.
- Now, we are going to set a style for the height for when the text is clicked/not clicked. Select your expandable text block and select “+ new binding”. Enter in
style.heightfor the property and thenstate.readMore ? '100%' : 'whatever you want for the starting height'for the binding. Select your expandable text block and navigate to the styles tab. Scroll down to the custom CSS properties section and addoverflow: hidden. This will hide the text overflowing from the box when the height is not 100%. - Now when you click your button, the expandable text box should change height.
Styling
Now that your expandable text block is working, you may want to add some styling.
- Lets start with changing the “read more” text. When the text box is expanded, we can change this text to “read less”. To do so, select the text and navigate to the data tab and select “+ new binding” in the element data binding section. Choose “text” from the property dropdown and paste this for the binding:
state.readMore ? 'Read less' : 'Read more'
Now, the text will change when the text is clicked on.
- Now, we can add an animation to our expandable text block. Select the expandable text block and navigate to the “custom CSS properties” section at the bottom of the styles tab. Select “+ new” and add “transition” as the property and paste this for the value:
height .1s linear
3.Lastly, it is common for expandable text boxes to be blurred or faded at the bottom before they are expanded. To add this functionality, wrap your current expandable text block in a box block. Then, add another box block within the parent box block.
Now, select the box block you just added and give it a width of 100% and a height of 50%. Then, select the layout dropdown in the styles tab and change the position from “block” to “absolute”. Now, give this box a bottom value of “0”.
With the box still selected, navigate down to the custom CSS properties section and add a background image and paste this in for the value:
linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9) 100%)
This will add the blurred/fade effect.
Lastly (with the box still selected), navigate to the data tab and select “+ new binding” in the element data bindings section. Select hide from the property dropdown and then select your “readMore” action from the binding dropdown.
Now, you should have a fully functional and styled expandable text box! View a working example here.
