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?
- Wrap each team member in a div with a hidden bio panel set to “Display: None.”
- Add a Click (Tap) interaction to toggle the bio panel's visibility and animate its height to expand/collapse.
- Use block or flex column layout so expanding a panel pushes content below; add optional close buttons and exclusive open logic if needed.
To create an expandable Team section in Webflow that pushes down the content below when clicked, you’ll need to use interactions and show/hide logic on a collapsible element. Here's how to do it.
1. Prepare Your Team Member Structure
- Wrap each team member profile in a div block (e.g.,
Team Member Wrapper). - Inside, have a visible section (e.g., name and photo), and a hidden div block for the person's bio (e.g.,
Bio Panel). - Set the
Bio Paneldisplay to None initially.
2. Add an Expand Interaction
- Select the clickable area (e.g., the team member’s name, photo, or a “+” icon).
- Go to Interactions panel, set up a Mouse Click (Tap) trigger.
- Use “First Click” to:
- Change the
Bio Panelto Display: Block. - Add a Size animation to animate the height (either from 0 to auto or a fixed max height).
- Use the “Open” animation to make the container expand smoothly.
- On “Second Click”, reverse the steps:
- Animate height back to 0, or use display: none at the end.
- This collapses the bio panel and pulls the layout back up.
3. Ensure Layout is Set to Push Content Down
- Make sure the parent wrappers use
Display: BlockorFlex Column(not absolute or float). - This allows auto-layout behavior, where expanding one section pushes others below it.
4. Optional Enhancements
- Add a "Close" button inside the expanded bio panel that uses a similar interaction to collapse the section.
- If using multiple team members on one page and you only want one open at a time, use Webflow’s “Close other elements” technique via IX2 logic or custom script (not supported natively without workaround).
5. Tutorials & Resources
Webflow University: There isn't a tutorial exactly titled "Expandable Team Section," but similar behavior is shown in:
Community Templates and Projects:
You can find clonable examples by searching “expandable team member” or “accordion” on Webflow Showcase.
Summary
To make a collapsible bio in your Team section, structure DOM elements so bios are initially hidden, then use a Webflow Click (Tap) interaction to toggle the display and height of each bio panel, allowing the section to expand and push down the rest of the page smoothly. Use layout settings (block/flex column) to ensure proper pushing behavior.