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?
TL;DR
- Wrap the content and "More/Less" button inside a div with a fixed height and overflow hidden.
- Use a click-triggered interaction to toggle the div’s height (e.g., 100px to 500px) and switch visibility between "More" and "Less" labels within the same button.
To create a "More/Less" button in Webflow that toggles hidden content within an existing element (without adding extra text boxes or elements), use Webflow's interactions and element visibility features.
1. Structure Your Elements
- Create a wrapper
Div Blockthat contains: - The content you want to expand/collapse.
- A "More/Less" Button (use a Button Element or a Text Link).
- Ensure the content section is set to a specific height (e.g., 100px) with overflow: hidden applied.
2. Create the Hidden/Expandable Content Effect
- Select the content div.
- In the Style Panel, set:
- A fixed Height (e.g., 100px).
- Overflow: Hidden, to truncate excess content.
3. Add Interaction for the Button
- Select the "More" button and go to the Interactions Panel.
- Set a Mouse Click (Tap) trigger.
4. Configure the Toggle Animation
- Action Type: Start an Animation → click New Timed Animation.
- Name it something like Toggle Expand.
Add the following steps:
- Step 1: Select the content div → Add an animation to change Height to Auto for expansion (or a larger height like 500px).
- Step 2: Add a second animation for collapsing (set height back to 100px).
- Under Animation Settings, enable “Limit to first click” and “Affect different elements on second click” to toggle between expanding/collapsing.
5. Update Button Text via Element States (Optional)
- You can't directly change inner text with interactions in Webflow.
- So, instead, use two Text elements ("More" and "Less") in the same button and:
- Show "More" by default, hide "Less".
- On expand, hide "More" and show "Less". Reverse on collapse.
Use element visibility animations in the same interaction to toggle their display states.
Summary
Use Webflow’s interactions to expand a content div by toggling its height and hiding overflow. No need for new elements—just style the content div correctly and create a click trigger animation that toggles height and optional button label visibility.
