How can I use Webflow to create a 'more/less' button that expands a div to show hidden content without creating a new element or text box?
- Create a single div with all content and a "More" button, then set a fixed height with overflow hidden to hide excess content.
- Use click interactions to animate the div’s height between collapsed and expanded states, and toggle button text visibility using spans within the button.
To create a 'more/less' button in Webflow that expands a div to reveal hidden content—without creating a new text box or element—you can use interactions to show/hide content within an existing div.
1. Structure Your Elements
- Use a single div block that contains all the content, including the hidden portion.
- Insert a Button or Text Link at the bottom of the div labeled “More” (you'll later toggle this text dynamically).
2. Set Up Initial Hidden State
- Select the div containing the hidden content.
- In the Style panel, set the div's Height to a fixed value (e.g., 100px) and set Overflow to Hidden.
- This will clip any content that exceeds this height.
3. Create the Interaction for Expand/Collapse
- Select the 'More' button.
- Go to the Interactions panel (lightning bolt icon).
- Click + next to Element Trigger and choose Mouse Click (Tap).
- Choose Start an Animation, then click + New Timed Animation.
4. Animate the Div Height
In the timeline:
Click + Add Action, then select the div block you want to expand/collapse.
Choose Size > Height.
Set animation step to change the height from a fixed value (e.g., 100px) to Auto.
Check the “Set as initial state” for the collapsed height if needed.
Name this animation e.g., "Expand Div."
Create a second animation for collapsing the div by reversing the above height values back to 100px, and name it "Collapse Div."
5. Set Conditional Logic (Optional)
If Webflow CMS isn’t involved and you’re using only Webflow’s native Interactions:
You’ll need to apply both animations (Expand and Collapse) with a Click toggle:
- In the Mouse Click interaction, use First Click: Play “Expand”
- Then Second Click: Play “Collapse”
To change the button text from “More” to “Less” and vice versa dynamically, use two Text Spans:
Place “More” and “Less” in the same Button and set one to Display: None.
Use the same interaction to toggle their visibility on clicks.
Summary
You can create a 'more/less' toggle in Webflow by using click interactions to animate the height of a div and control overflow. No extra element or text box is required—just smart use of interactions and visibility toggles within your existing structure.