Reveal CMS data on click into separate section

Hi there,

I’m struggling to figure out how to reveal a team members information when clicking on their name within a list on a team page.

I want to link between the single column which details their name and title, and when you click revealing a larger portion of their data, all being served from the CMS.

Image of how the page looks for reference:

Not only this, but also always starting with the same team member (founder) when the page loads, and then for the user to be able to then navigate through the rest of the list.

If anyone knows any solution, they would be much appreciated!

Here is my public share link: [LINK]1
(how to access public share link)

Three possibilities.

Option 1 is to build out your sidebar panel so that each team member’s info panel is physically inside of your collection list. Then hide that panel content, and use a click interaction to hide-all-sidebars and then display one sidebar. This requires a decent understanding of interactions, and a careful arrangement of your elements so that you can target the classes properly.

Option 2 is to use an IFRAME, and pull the content from another page. You’d use your team collection page for this, and nothing else. Works, but a wee bit hacky, since that page wouldn’t be useful for direct linking & SEO.

Option 3 is to use javascript and pull the content from another page, e.g. a hidden element. You’d again use the team collection page, but this part can be hidden, since JS can select that element group directly and load it AJAX-style.

This part adds some complications.

In the above approaches;

Option 1 - I think I’d try using a small piece of javascript on page load to locate the first collection item, and to make it visible.

Option 2 - you’d manually set the iframe src to show the initial item you want.

Option 3 - You’d just use your AJAX-style script to load the first item on page load.

The main decision is probably about how comfortable you are with interactions (1) v. HTML smithing (2) v. JS (3).

Thanks for the detailed breakdown Michael!

As my coding knowledge is little to none, I’d say option 1 is probably where I’m going to have to head down.

Do you think a similar outcome could be achieved if I built the left and right (name and then detailed) into two separate but linked CMS lists, so that the data wasn’t overflowing from the same CMS list? Or would this just add another layer of complexity to something which is already feeling a bit out of my novice depth.

I found this useful tutorial ( Power-Up: CMS List Sync in Webflow - YouTube ) which is achieving what I imagine the backend needs – do you think something along these lines might work?


Not really. there are some variations of this approach that give some benefits, but they add coding complexity which doesn’t help you. The main problem is that if you separate left and right into two lists, you won’t be able to click-target via interactions.

You’d need to code the click targeting and show/hide by js instead.

See if this helps:

I can visualize you using this with what you’ve described and filtering the collection list to only one item on each tab. The tabs could be the items in a list on your team page.

That’s ideal thank you!

I’ve just been playing about with it, seems to do the right things which is perfect – very much appreciated.

Currently, the tabs content sits below the list on the left after the implementation, do you know if there’s any way to have a tab content frame positioned inside another section of the page so that I’m not having to redesign my entire page to fit the new tab content section in?

I may not be fully following you, but if I am that should be doable as long as that other section is part of that tab. You should be able to adjust the layout & design of it.