Accordion dropdown click outside of item to close

Hi there,

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: https://preview.webflow.com/preview/toobright?utm_medium=preview_link&utm_source=designer&utm_content=toobright&preview=70a66322c812ae4f797f972b05a056b1&mode=preview

1 Like

Hey @gsell Welcome to the Forum!

Have you taken a look at our University at the Article on Creating a Custom Accordion? Create a custom accordion | Webflow University

In regards to closing the accordion on clicking outside, you could try adding in a fixed div block that sits behind all of your content instead of using the body. Then if anyone clicks elsewhere it will trigger that part of the animation.

Let me know if that helps. :smile:

Cheers!
Drew

1 Like

Hi Drew

Thanks for your answer

Yes I had looked at that tutorial and tried with a div block instead of the body, but I found the bugs to remain.

The interaction setup is:

  • accordion toggle 1st click: open accordion
  • accordion toggle 2nd click: close accordion
  • div/body 1st click: close accordion

So if I click on the body to close the accordion, I have to click twice on the same accordion toggle to re-open it as the second click is trying to close the already closed dropdown.

Every click on the toggle also seems to try to apply the div/body close interaction so it’s jerky to open unless the animation delay is 0.0

The accordion dropdown also closes itself if you click on the dropdown list, even if it’s a button

https://preview.webflow.com/preview/toobright?utm_medium=preview_link&utm_source=designer&utm_content=toobright&preview=70a66322c812ae4f797f972b05a056b1&mode=preview

Did you ever happen to find a solution to this? In my very short time on here so far, I found to avoid the two click interaction that the open needed to be one interaction and the close needs to be another interaction. Would love to find another solution to this though.