Accordian Interactions broke with CMS

[slstudio (Sophie Lee)]

Hello WF Community…
I’ve already posted this question in Design Help - CMS but I think this is also an Interactions issue and I am beyond my head. I tried for hours yesterday to no avail so if you know how to fix this I am so so grateful.

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. Also how can this be configured in a way that the tabs could continue horizontally on desktop?

I am so close to launching. Any help would be sooooooo beyond appreciated.

Thank you,
Sophie

live site: Gallery - LeRoy Bennett
read-only: Webflow - SDW

---

[1]: Gallery - LeRoy Bennett
[2]:Webflow - SDW

[memetican (Michael Wells)]

Linking to the main thread, you don’t need double postings here.
Most people follow the main combined feed.

Accordian Interaction broke with CMS

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.