I’m using a CMS to create an FAQ-accordion. I’ve set up an open/close interaction that works, however: I’d like the items auto-close when a new item is open and I don’t understand how to do this easily. It should be possible, wouldn’t it?? Yet I’m absolutely lost.
You should be able to do an interactions-only version of this but it depends on your accordion structure and your options for class targeting, e.g. all, siblings-only, or children-only.
If for example this is your structure
Item Container
Item Heading Area
Item Content Area
And the heading is your trigger, than the open-close is going to target the sibling content area element. In that case your click 1 could try targeting ALL content areas and close them, and then open just the current one- but you’ll see a slight delay. Say 0.5 sec for the close, and then 0.5 for the open.
Another option is to use the Item Container as the click trigger, and also to use it for the open-close effect. Your heading would be fixed-height, and you’d be shrinking/expanding the whole container to hide the content, while keeping the heading visible. e.g. closed height is 2rem, open height is auto.
This feels a bit awkward to setup, however the advantage here is that your interaction can simultaneously “close” all of the sibling containers while opening the current container. No open-delay.
There’s a downside though, which is that you probably cannot have links in your content, since clicking anywhere in the container ( content included ) would trigger the interactions.
Honestly, I’d probably look for a JS solution personally.