I’m trying to create an accordion component based on using several of the default Webflow dropdown components.
On opening an accordion item, I would like an animation to change the icon (flip it), background color and border-radius of the toggle. The only way I found to do this in Webflow was creating a different div and show/hiding them respectively.
This seems to remove the default dropdown behaviour of it closing on a click outside the accordion item.
Does anyone know how to do this?
Adding an interaction to the body element seems buggy as it tries to close the items even when opening them.
Is there a way to get a ref to the accordion item and exclude that from a body click interaction?
Any help much appreciated!!
Edit: not sure why but the interactions seem to be disabled in the preview link. I’m referring to the interactions placed on the Dropdown Toggle in the faq-item symbol
Here is my public share link: Webflow - toobright