How can I make the block in Webflow containing hidden text grow to the same height as the text itself when the button is clicked, without pushing other elements?
TL;DR
- Create an absolutely positioned, overflow-hidden div with initial height set to 0px inside a relatively positioned parent container.
- Use Webflow interactions on a button to animate the div’s height from 0px to a specific px value representing its full height, preventing layout shifts.
To make a hidden text block expand to its full height when a button is clicked—without pushing other elements—you need to use absolute positioning and some Webflow interaction logic.
1. Set Up Your Text Block
- Create a Div Block that contains your hidden text.
- Give this Div a fixed height (like 0px initially) and turn overflow to Hidden.
- Set Position to Absolute if you don’t want the block to displace nearby elements when expanded. Position it relative to its parent section or container using settings such as Top: 0, Left: 0 as needed.
2. Configure the Parent Container
- Set the parent container’s position to Relative, so the absolute-positioned text block appears inside it properly.
- Ensure the parent has enough height or space to visually contain the expanding text.
3. Create an Interaction Trigger
- Select the Button that will control the expansion.
- Go to Interactions panel → Element Trigger → Mouse Click (Tap).
4. Build the Animation
- On first click, select Start an Animation → Create a New Timed Animation.
- Choose the hidden text block and add an action to Change Height:
- Start at Height: 0px.
- Animate to Height: auto (Webflow doesn’t support auto, so manually test and enter a specific px value that represents the full height).
- Optional: Add a Fade In or Opacity animation for smoothness.
5. Add a Collapse Animation (Optional)
- Still in the interaction, add a Second Click animation.
- Use the reverse: Animate from full height back to 0px, and set opacity to 0%.
6. Prevent Overflow If Needed
- Be mindful of z-index if the expanding area overlaps with other sections.
- Set z-index on the expanding div to ensure it appears above other elements.
Summary
Use an absolutely positioned, overflow-hidden div and animate its height from 0px to a defined height using Webflow interactions. This allows the block to grow without pushing nearby elements. Since Webflow doesn’t support height: auto natively in animations, manually set a px value close to the text height.