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

Wrap the expanding block in a relatively positioned container and set the block to absolute with height 0 and overflow hidden.
Use Webflow interactions to animate height changes with a fixed pixel value, or use custom code for auto height expansion, ensuring surrounding elements remain unaffected.

To make a Webflow block containing hidden text expand to reveal its full height on button click without pushing surrounding elements, you need to set the block’s container to use absolute positioning or fixed height within an overflow-hidden wrapper. Here’s how to do it:

1. Structure Your Elements Properly

Use a wrapper div that maintains the layout flow and context.
Inside the wrapper, place the expanding block (the one with hidden text) with absolute positioning.
Place the toggle button within the wrapper.

2. Set Initial Styles to Hide the Text

Select the expanding block and apply these styles:
Position: Absolute (relative to the wrapper)
Top / Left / Width: Set as needed to position correctly
Height: 0px
Overflow: Hidden
Transition: Set height transition (e.g., height 0.4s ease)

3. Create the Interaction on the Button

Select the trigger button, go to Interactions panel.
Create a new Mouse Click interaction.
On 1st Click:
Use Element Action > Size > Height.
Animate the height of the expanding block from 0px to something large (e.g., auto won’t animate—use a pixel value like 300px).
On 2nd Click:
Animate height back to 0px.

4. Prevent Other Elements From Being Affected

Because the expanding block is absolutely positioned, it sits on top of other content rather than pushing layout elements.
If your design needs the expanding panel to overlay within a container, ensure the wrapper is positioned relative, so the panel is contained.

5. Optional: Use Webflow's Custom Code for Smooth Auto Height

Webflow interactions do not support transitioning to height: auto, but you can use minimal custom code like jQuery to simulate this:

Add the following code in your Before </body> tag section:

<script>
  $('.toggle-btn').click(function(){
    var content = $('.expand-block');
    if(content.height() === 0){
      content.css('height', content.get(0).scrollHeight + 'px');
    } else {
      content.css('height', '0');
    }
  });
</script>

Ensure your button has class toggle-btn and your expandable div has class expand-block.

Summary

To expand a hidden text block in Webflow without shifting other elements:

Place it in a wrapper with relative position.
Set the block to absolute, with initial height of 0 and overflow hidden.
Use Webflow interactions to animate height, or use custom code for auto height.

This allows the text to expand visually on button click without affecting surrounding layout.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer