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
- Set up a "Team Members" CMS Collection with relevant fields and content.
- On the team page, use a Collection List with a text link bound to each member's name, then link to the CMS Template Page or use Interactions to toggle a hidden div with more info inline.
To create a clickable team member name that reveals more info from the CMS, you can use Webflow's CMS Collections combined with Interactions or a dedicated CMS Template Page.
1. Set Up the CMS Collection
- Go to the CMS panel and create a Collection (e.g., "Team Members").
- Add fields like Name, Photo, Bio, Role, URL Slug, etc.
- Populate each CMS item with info for each team member.
2. Create a CMS Collection List
- On your Team page, drag a Collection List and connect it to your "Team Members" Collection.
- Inside each item, insert a Text Link or Button and bind it to the Name field.
- Set the Link Type to “Link to Current Team Member” to direct users to that member’s dynamic CMS page.
3. Design the CMS Template Page (Optional)
- In the Pages panel, click the Team Members Template Page.
- Structure this page to show additional info (e.g., photo, extended bio, social links).
- Bind elements to their respective CMS fields.
4. Optional: Use Interactions for In-Page Expansion (No Page Load)
To reveal more info on the same page without linking out:
- Inside the Collection List, add a hidden div block with additional info (bio, photo, etc.) and bind to CMS fields.
- Use Webflow Interactions (IX2) to create a toggle animation that shows/hides this div on click of the member's name.
- Set the hidden div’s initial state to Display: None, and then toggle to Display: Block or Flex using the Click Trigger.
5. Responsive Design
- Make sure the expandable section is mobile-friendly.
- Test that overflow or height changes don’t break the layout on smaller screens.
Summary
You can link a CMS-connected team member's name to either (a) a full dedicated CMS page using a dynamic link or (b) reveal more inline information using Webflow Interactions with a hidden div. Both options work with Webflow CMS and require no custom code.
