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.
This part adds some complications.
In the above approaches;
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.
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’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?