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.
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!
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).
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.
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.
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.
Sadly CMS tabs didnt work due to not being able to import multiple fields, whilst also being a slight nightmare when it came to formatting the page due to the spreading of one container into 2 columns whilst still being one item.
Ive now attempted this dynamic anchor link which feels like it achieves the right solution where I can link within the page.
The issue is now that when I go to reduce the full collection list to one item, it wont link as the content is not displayed, however it’s still reading the titles of the articles and placing into the contents list to the left, which I find confusing.
I’m not sure how to get around this – any further help would be greatly appreciated!
I did give it a try, but because both pages function from CMS lists I was finding it hard to set it so that the click was registering with the right collection item. As they would always have to be updating depending on what new articles / people are added in, I wasn’t sure if I could update the click so that it was connected to the other information as it’s all set from one div block in the initial left hand column which is then populating the rest of the contents.
Also setting it so that one item shows at the start consistently, but then also setting a click interaction within the same block on top of that I was finding difficult to get my head around.
The client is needing to add articles / team members frequently so having CMS lists for both groups makes that handling easier, as I don’t want to be jumping in and out of editing for them.
