So I’m trying to create a two column menu where on the left side it’s a list of names pulled from a collection, and when clicked a div shows up on the right side showing an image and information pulled from the same collection. The menu itself needs to remain static.
I have no idea why this one’s breaking my brain, but that seems to be the case today. Any and all help is greatly appreciated.
Bonus points if someone can help me figure out how to go from one menu item to the next when there hasn’t been interaction in X amount of seconds.
To elaborate;
My issue is that I can’t figure out how use the CMS to connect these two objects (or design them within a collection list), so that the list on the left triggers the information from the collection to show up on the right.
Tabs will do what you want, but you’ll still have to figure out how to get the tab triggers on the left. I’m 98% sure it’s relatively easy though.
For the bonus…
I was thinking, why you would want to have button triggers if you will just automatically show the next subject? If I am a end-user, I will just wait for the slide show to loop around instead of clicking.
For anyone finding this in the future;
What I ended up doing was using the embedded code feature to display the collection page template.
So I set up one page that has the names menu on it, populated by the CMS, then coverted that menu into a symbol.
I then set up the collections template with that menu symbol on the left side of screen and the variable div containers for the name, image, bio on the right.
I then used the address of the menu screen and embedded that code onto the page I wanted to display this hacky widget.
In order to ‘rotate’ when there was no interaction I then set up a slide show containing a duplicate div set as the collection page with information drawing from the CMS. I then set the sort order to ‘random’. The slide show would then go onto the page that I set the menu up on so that once the names were interacted with, it would navigate to the collections page.
