Hello WF Community…
I am so close to finishing the website and this is a huge hurdle I don’t know how to solve without custom code.
Right now the Featured (Featuring) section in the gallery has an interactive accordian.
When I bind it to the CMS collection, each item generates in the open states (as opposed to first open, subsequent closed) so they are all displaying open vertically (where the design is supposed to be 1 horizontal accordian with 4 tabs).
Is there a way to bind interactions to each CMS? How can I get this design to display properly on desktop? In tablet and lower breakpoints it displays fine, although still load all open and ideally 2,3,4 would load closed.
I am so close to launching. Any help would be sooooooo beyond appreciated.
Hi Sophie, I don’t have time to dig in so someone else might be able to give a more thorough answer, but the approach I’d use here is to set the interaction so that they’re all closed initially.
Then have a small piece of custom code to open the first one.
The most interaction-friendly way to do that is JS that finds the first accordion item and click it- that way no matter what you do with the interactions, it won’t be hindered by e.g. custom CSS overrides.
Hi Michael,
Thank you so much for your reply and noted about double posting… I didn’t realize it was a combined main feed.
Yes I will try setting it closed first. I don’t know how to write any code. Is there somewhere to get code help?
There are a lot of professional devs here that you can contract, me included, But for something this simple what I’d suggest is create it with the closed state and the try using chatgpt to help you write the code. It’s a valuable skill to build, even at a basic level.
Post your initially-closed-state version here as well, there are some here who can look and help you write the code needed. It’s a bit trickier working outside the project, but still a fun exercise.
