Need help with click-to-close interaction

[Mowgli]

I’m having issues with interactions that work in edit mode but not when previewing. The issue seems to be caused by nesting. If you look at this (stripped don version of what I’m creating) https://preview.webflow.com/preview/close-but-issues?preview=c9f2026ecddd7c8310f4a80c7e4e565d

Preview it and click on “nominal voltage”, a panel appears. Now clicking the “x” on the panel doesn’t close it despite having the same interaction as the link named “clicking here works to close the panel”

The interaction is not targeted to sibling or nested so it should work globally. It has to be said that eventually the interaction should actually be targeted to sibling from the “x” so that I can have several of these panels working together. But I couldn’t get it to work at all

There are some bugs but I just had to put it together quickly to show the issue.

Thanks

[cyberdave (Dave S.)]

Hi @Mowgli, thanks for the post. I have a couple of suggestions that may help.

First, I would suggest to change the structure as follows:

Next, lets check the styles on the “filter item” class (click the image to expand):

And then the “filter ops and close” class (click the image to expand):

Next the “close-button” “filter ops” class (click the image to expand):

Now on to the Interactions setup. Lets assign the “show filter options” interaction to the “filter item” class. In the “show filter options” interaction, remove the second trigger that shows and hides the close button.

And now assign the interaction “filter panel close but” to the “close-button filter ops” with the following interaction settings:

The button will always be visible on the panel, but hidden when the parent “filter ops and close” class is set to display none.

The steps above for me results in:

I hope this helps!

[Mowgli]

Thanks a lot for this, I’ll give it ago. I’m still not quite sure why it wasn’t working previously though.