Accordion: linked interactions

Hey guys,
I have a button which opens+closes an accordion section. I have created another button inside the accordion section which is a close-only button.

I’ve found two issues:

  1. If I assign the original Accordion Close animation to the close-only button, it does nothing.
  2. If I create a new animation (Accordion Close B), it doesn’t work as I would like. It needs to reset the open+close button’s first click/second click state. How would I do that?
    The current (incorrect) behaviour is this:

-Load site
-Click open+close button = accordion section opens (correct)
-Click close-only button = accordion section closes (correct)
-Click open+close button = accordion section DOES NOT OPEN
-Click open+close button = accordion section opens (correct)

Also, just found a bug. In the public share links below, the interactions are broken. In the Designer they work perfectly. I haven’t exported the site to test offline yet.

https://preview.webflow.com/preview/pfss-2019-2?utm_medium=preview_link&utm_source=designer&utm_content=pfss-2019-2&preview=bb56343e124e2aec369d8bf770388f1c&mode=preview

https://preview.webflow.com/preview/pfss-2019-2?utm_source=pfss-2019-2&preview=bb56343e124e2aec369d8bf770388f1c&mode=preview

If an IX has 2 clicks, say open and close, if you use another IX to close, reclicking afterwards on the first button actually closes what’s already closed, it does something that’s not visible. The second click has to be registered in order for the IX to reset.

That’s why when you have open close things using several trigger elements, you can/should never use the second click of any IX. Find a way to either mask the open/close button after it’s being clicked, or overlay it with an invisible element with the close only IX bound to it.

There’s a way to simply make accordions in Webflow: use a series of drop-down menu items. As demoed here:

You won’t have to deal with the opening and closing as it’s handled already pretty well.

Also on Accordion interactions, I’m trying to make a WCAG 2.1 accessible accordion. I therefore need the trigger button to have focus (be operable by keyboard), so I’ve started with an actual button. I’m quite pleased with the way I can get the chevron to point up and down to show Open and Close, but I also need to have a “hover” state. This is the bit that is killing me.

https://preview.webflow.com/preview/jonathans-blank-site-71b734?utm_medium=preview_link&utm_source=designer&utm_content=jonathans-blank-site-71b734&preview=aa7262d9cfca903738221d1bc46a02a6&pageId=5d0c73490157183291f7215e&mode=preview

Any ideas anyone?

Hi Jonathan,
There’s a separate bit for that. You need to set the On Hover state of the button. It’s a tiny ‘switch’ in the top right corner of the control panel on the right of the screen. Once you create an on-hover state, that little ‘switch’ will be green, IIRC.

It is completely unrelated to the OP, though.

Hope that helps,
Dax.

@Vincent thanks for your reply.
Is there a way my close-only button can trigger my open/close button rather than executing the interaction to close the accordion directly?

I’m happy to use off-site scripting if that’s the only way to trigger the original open/close button.