How to create responsive accordion

Hello everyone!

This is my first webflow project ever and I am kind of struggling to achieve what I would like to achieve with this section. This is how it looks like now.

ezgif.com-gif-maker

What I would like to achieve is that every time the user enters the page, the first drop down will be open on default and if they click on 2nd the 1st will close etc. Any ideas how I could achieve this with interaction with no code? Currently I have interaction set for each drop down separately and resources I found so far, did not help me I just made it all broke.

Would appreciate any help.

This is the preview for my project.

https://preview.webflow.com/preview/producate-final?utm_medium=preview_link&utm_source=designer&utm_content=producate-final&preview=652f642a416e43867d31929ec565ce0c&workflow=preview

1 Like

Hey @Selmira !

I actually had to deal with a similar issue recently on my website and I found that a low-code solution worked best for me.

Here’s a video of how I would recreate your interaction with the functionality you’re looking for: https://share.cleanshot.com/phG4se

I’m not 100% sure the final result will work because I wasn’t able to test the code on the share-only site, but if it’s not working for any reason, I’d be happy to hop on a quick video-chat to walk through it together :slightly_smiling_face:

1 Like

Hey Clark!

Wow thank you so much for this super extra effort. I really appreciate it.

Hey!

So sadly it’s not working. I went step/by step removed interaction and added classes as suggested… When I scroll to the page the first tab is open, but it does not close or open.

I used the following jQuery code. The generator gave me only 1st 2nd and 4th row. I retyped the 3rd row based of your video.

$(‘.faq4_question’).on(‘click’, function() {
$(‘.faq4_answer’).removeClass(‘active’);
$(this).find(‘.faq4_answer’).addClass(‘active’)
});

Any ideas why it’s not working. Would you be so kind to look at it again if I havent made some mistake.

Thanks a lot I really appreciate it!

Hey @Selmira,
The point is that ‘faq4_answer’ is not a child of 'faq4_question’. You need to change the third row to:
$(this).siblings(‘.faq4_answer’).addClass(‘active’)

2 Likes

Hey Elena!

Thanks a lot! If I would like to apply the same effect on different section. Will I need to use the same code just change the class name? Should I just copy the same thing to the next row starting with ???. Also is there any way to add ease animation to that? Cause now its very flat.

@Selmira yes, you can copy the section and the code (all rows) and change the class names.
To animate it, add transitions to ‘faq4_answer’. All styles that change when the active class is added can be animated. Like opacity, margins, bg color, transform etc.

1 Like

Thanks for catching this for me, @Elena_Laenko !

Hey! Thanks a lot. It make sense in theory, but my newbie webflow brain cannot quite grasp it :D. I tried to play with it a little bit, but I just made the code broke and it did nothing. When I look at the element triggers, the only thing that makes sense is to use a mouse click, but how can I connect it to the element which is closed? Or to the class?

@Selmira I just realized that you don’t need to use that code! You can set interactions on faq4_accordion. Open it on first click and close on second (actions with its child faq4_answer, without any additional classes). And one line of code so that the first item is opened.

<script>
$('.faq4_accordion').click()
</script>

It should be instead of this one?

$(‘.faq4_question’).on(‘click’, function() {
$(‘.faq4_answer’).removeClass(‘active’);
$(this).sibling(‘.faq4_answer’).addClass(‘active’)
});

Yes, if you create the interactions.

HI @Selmira I had recently provided solution for for almost identical request so check it out as it may be helpful to bring some light into technical aspect and maybe solve your request.

IMO if text you reveal on click is just informative you may consider to reveal it on hover instead (can be done in WF without custom code) as from UX point of view you will save 1 click to show user this content. Just think about that.

@clarksaxby and @Elena_Laenko

Hey guys!

I am super sorry to bother with this again. I have decided to keep it simple and try not to get a nice transition as the priority for now is to have a page functional for testing. I removed all transitions, and interactions, but now nothing is working at all. I tried to build the whole thing again, remove the code and add it back in, but it’s just static. Would any of you two, be kind enough to check what might be wrong.

Thanks a lot!

https://preview.webflow.com/preview/producate-final?utm_medium=preview_link&utm_source=designer&utm_content=producate-final&preview=262a76f5e57d28a8cd13422bf5d93cfd&workflow=preview

So the whole thing was dead. But one of my colleagues was able to help me. Now it is working like a charm :). Thanks a lot for you help I appreciate it a lot.

1 Like