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?

To link a team member’s name on a team page in Webflow so that clicking it reveals more CMS-based information, use a Collection List with interactions or CMS-driven modals/sliders. Here's how:

1. Use a Collection List for Team Members

• Add a Collection List to your team page and connect it to your Team Members CMS Collection.
• Inside each Collection Item, include the team member’s name, image, and a “More Info” link or button.

2. Add Hidden Detail Sections

• Within each Collection Item, add a div block that contains more info (bio, position, links, etc.).
• Keep this set to hidden (e.g., display: none or opacity: 0) by default.

3. Create a Webflow Interaction

• Select the “More Info” link or the team member’s name to trigger the interaction.
• Use a Show/Hide animation:
• Initial State: set the detailed info section’s opacity to 0 and display to none.
• On Click: set display to block and animate opacity to 100%.
• Optionally, add a close button inside the extra-info div to reverse the interaction.

4. Use CMS Fields for Dynamic Content

• Inside the hidden detail section, bind all elements (name, title, bio, etc.) to dynamic fields from the Team Members CMS Collection.

5. Alternative: Link to CMS Item Page

• If the info is too long for a toggle, make the team member’s name a link to the CMS Template page for that person:
• Drag in a Link Block or Text Link.
• Set it to Link to Current Team Member.
• Style accordingly and use CMS Template Pages to control the layout of individual team member pages.

Summary

To show more CMS-stored info when clicking a name, use a CMS Collection List with hidden reveal sections and Webflow interactions. For more complex data, link to the member's CMS detail page instead.