How can I make the Team section in Webflow expand when clicked, pushing down the other sections to reveal the person's bio? Is there a tutorial or guide available for this feature?

To create an expandable Team section in Webflow that reveals a bio and pushes other content downward (accordion-style), you’ll need to use Webflow Interactions with element height animation. Here's how to do it step-by-step.

​

1. Set Up the Team Section Structure

​

• Create a Parent Div (e.g., Team Member Wrapper) to contain each individual.
• Inside this div, add:
• A Clickable Div or Button (e.g., Team Header) with the person's name/photo.
• A Hidden Bio Div (e.g., Bio Panel) that includes the bio content.
• Set the Bio Panel’s initial height to 0px, overflow to hidden, and optionally display block (if hiding with height only).

​

2. Add a Click Interaction

​

• Select the Team Header (the element users click).
• Go to Interactions Panel (Lightning icon) > + Element Trigger > Mouse Click (Tap).
• Choose "Start an Animation" > + New Timed Animation.

​

3. Create the Expand Animation

​

• Name it something like “Show Bio”.
• Add an Action: Size targeting the Bio Panel.
• Set the action to:
• Height: 0px as initial state.
• Height: Auto or a fixed height (e.g., 200px) for the end state.
• Add an easing (like ease-out) and duration (about 300–400ms).
• Optionally add an opacity change if you want the content to fade in too.

​

4. Create the Collapse Animation (for Toggle)

​

• Add a second click animation to collapse.
• Mirror the above steps, but animate back to Height: 0px and Opacity: 0 (if used).
• This makes your bio expandable and collapsible.

​

5. Ensure Content Below Is Pushed Down

​

• Since you’re adjusting element height, Webflow’s layout engine will naturally push other sections down as the content inside the page expands.
• Make sure all parent containers use proper positioning and spacing, not absolute positioning.

​

6. Optional: Only Show One Bio at a Time

​

• Add custom JavaScript or additional animations to hide other open bios when a new one is clicked.
• Webflow's native Interactions don't manage group state (like "close all others"), so for this refined control, lightweight custom code is needed.

​

7. Is There a Webflow Tutorial?

​

• Visit Webflow University and search "Accordion Menu" or "Expand/Collapse sections."
• Direct guide: Webflow Accordion Tutorial — this uses the exact same principle, just applied to a different context.

​

Summary

​

To create an expanding Team section in Webflow that reveals bios and pushes content down, build a structure with hidden divs, then use click interactions to animate the height from 0px to auto. Use Webflow's Interactions panel and reference the official Accordion Menu tutorial as it follows the same method.