I have this simple panel designed which has text in it (heading, subtitle, body) and 5 buttons (actually text blocks) underneath them. The subtitle and body are linked to a CMS collection. I’m trying to make that when you click on one of 5 buttons, it loads a specific item from the collection.
the panel needs to stay as it is, only the subtitle and body should change. Like i have 5 names as buttons, whenever I click one of the names it loads the appropriate content from the cms collection.
I’ve tried using Finsweet Filter, but it’s not working if I need to show only one entry at any time, and it needs to have a radio or checkmark to work.
hi @Julius_Bulius I can’t say how to in your project as you do not follow Froum guide. But generally speaking it should be possible. the click on “button” show/hide one of already preloaded contents in nested collection.
Hey Julius, I can recommend two approaches that should be easy enough to implement, both involve FS libs.
TABS ELEMENT + FS CMS TABS
Your bottom links could be designed as tabs.
FS CMS Tabs would merge a collection list of data in to create the CMS driven tab content
FS CMS FILTER
Your bottom links could be radio buttons, you should be able to style them as buttons
FS Filter would apply that selection to determine what text to show
It sounds to me like #1 is what you want. #2 has a problem of initial state- either you’d show no text initially, or you show all 5 items initially, or you’d need some special script / linking to initialize the filter state to the first selected item.
Of course you can also use interactions to build simple UX’s like this, but you need to understand well how they’re designed and think outside the box a bit.
Thanks for the recommendations. It seems FS CMS TABS is the easiest way to go in this case. Though in other cases one needs to find creative solutions, especially when you want to dynamically change the background image for the whole page and and some text in parts of a panel above it…
