Team Member Card Component Interactions in Webflow

At a glance

The community member has a team member card component in Webflow with properties for name, role, photo, and socials. They want to display a modal when a team member's profile is clicked, but they can only have a single interaction that applies to all instances of the component, causing every team member to display the same modal. A community member suggests choosing the "element" option when adding the interaction, which should allow different interactions for each component instance. Another community member provides a Replit example where each team member card has an attribute to open a specific modal, and a function is used to open the right modal for the right person.

Useful resources

BBlair

In Webflow, I have a team member card component.
I have properties for name, role, photo, socials.
I want to display a modal when I click a profile (component).
However, I can't see how to add different interactions for each component instance.

Example: click team member A, open modal A with their bio.
Right now I can only have a single interaction that applies to all instances of the component, therefore every team member displays the modal A 😢

Any ideas?

(Client not on CMS plan)

3 comments

EEmily Marais

When you add the interaction you can choose whether it applies to the selected class or to the selected element. Choose element and it should work

SSofian Bettayeb

Hi blair,

I created a replit with the challenge and you can access the code: https://replit.com/@sofianbettayeb1/TechnologicalExtraneousOpenlook?v=1

Let me know if it’s not clear.

But in short
Every team member card has an attribute to open a modal

<div class="team-member" onclick="openModal('member3')">
            <img src="member3.png" alt="Member 3">
            <h3>Member 3</h3>
        </div>

Then it run a function to open the right modal for the right person.

function openModal(memberId) {
  const modal = document.getElementById('modal');
  const details = document.getElementById('modal-details');

  details.innerHTML = `
      <h2>${teamMembers[memberId].name}</h2>
      <h4>${teamMembers[memberId].role}</h4>
      <p>${teamMembers[memberId].bio}</p>
  `;

SSofian Bettayeb

Here is the result

Add a reply

Community forum for knowledge and support

Team Member Card Component Interactions in Webflow