How can I link a team member's name in a list on a Webflow team page to reveal more information about them, all served from the CMS?
TL;DR
- Create a CMS Collection for team members and design a Collection List with each item showing a name and a hidden info panel.
- Use Webflow Interactions to toggle the visibility of the info panel when the name is clicked, ensuring it only affects the related item.
To reveal more information about a team member when their name is clicked—using Webflow CMS—you’ll need to use dynamic content and interaction settings within Webflow.
1. Build the CMS Collection for Team Members
- Go to CMS and create a new Collection called something like Team Members.
- Add fields like:
- Name (Plain Text)
- Role (Plain Text)
- Bio or Description (Rich Text or Plain Text)
- Photo (Image)
- Any other fields you'd like to display when expanded.
2. Design the Team Section with CMS Collection List
- Drag a Collection List into your page and connect it to the Team Members CMS.
- Inside the Collection Item:
- Add a text element for the Name.
- Add a hidden div for the full-info section (e.g., Bio, Role, Photo).
- Style the hidden section so it’s not displayed by default (set display to None).
3. Set Up Interactions to Reveal Info on Click
- Select the Name text element inside a Collection Item.
- Go to the Interactions panel (lightning icon).
- Create a new Mouse Click (Tap) interaction for the name.
- Add an action that changes the hidden info div to display: block or flex/fade in.
- Optional: Add a second click to toggle (i.e., hide again on second click).
- Important: Make sure the interaction is set to affect only elements inside this specific Collection Item using "Limit to nested elements".
4. Ensure CMS Binding for Dynamic Content
- Inside the hidden info div:
- Bind elements like Bio, Role, and Image to the correct CMS fields.
- Only the name needs to be always visible—the rest can remain hidden until clicked.
5. Test Responsiveness and Functionality
- Preview the page and test the interaction.
- Make sure each name toggles only that member’s info and not all at once.
Summary
Use a CMS Collection to hold your team data, then create a Collection List where each item includes a clickable name and a hidden info panel. Use Webflow Interactions to show the related CMS-driven content within that Collection Item when clicked.