Can anyone help with accordion FAQ interaction?

[Ozalcin (Mustafa)]

Hi there,

I’m building a very simple FAQ accordion, as you can see from the share link below.

I’ve managed to get it to open and close and change the heading bg and font colours when open and when shut… No issues there.

However for the simple mouse on hover interaction, I can’t for the life of me get only the heading that’s being hovered over to change. All the headings change at once.
I’ve tried all the various permutations re only affect sibling etc…

Can anyone help?

Thanks so much in advance.

M

Here is my public share link: Webflow - Copy of Toggery

[Stan]

hi @Ozalcin this effect is very easy to achieve on Webflow.

1. delete your “change color” action from element (you don’t need it)

2. select your element accordion-header and choose on hover

3. once selected change your whatever you need to be changed on hover (in your case color of text and background)

DONE

I will recommend to watch videos on Webflow University to get basic knowledge how to work with Webflow.

[Ozalcin (Mustafa)]

Hi Stan,

Thanks for your kind reply. I’ve watched Webflow University (and other videos) that Maguire and Grimur share with us, several times; for education and entertainment. That’s not the issue.

Adding a hover effect is simple, as you point out.

What I want is, to have the bg colour of the active question (open accordion heading) to remain red when that answer is open. And to return back to no bg, when closed. And for that I need to add an interaction… unless there’s another way you know…?) And I 've done that. That part works.

What I need is the initial hover…

For this, if I use the transition that you point out (and I did originally), it obviously works… however, when the accordion is opened and then closed, the hover (the standard way you recommend adding it) does not work a second time… Which is why I’ve been trying to add it as an interaction… Where I face the problem I posted… Can that be solved?

[webdev (Jeff S)]

You could simply add a class on click. See https://classadder.webflow.io/

[Ozalcin (Mustafa)]

Thanks for taking the time to assist, Jeff.
So I can’t achieve what I’m trying to achieve without adding some code?

[Stan]

hi @Ozalcin here is an EXAMPLE how to

LIVE

This example is only custom code (CSS, JS) in embed approx 20 lines so nothing complicated. As you can see on live example when you click second time tab to close accordion, tab (trigger) still remain red as there is active on hover action on trigger. There is no easy way (if any) to achieve canceling hover effect when element is still hovered. There may be a way to on hover bring second class with identical setting as on click but I didn’t tried it as IMHO it not a clean solution (I don’t thing so). So you can spend some time to figure out if it is possible or just compromise on solution. Or someone else can help you with that .

[Ozalcin (Mustafa)]

Thanks so much Stan…