Streaming live at 10am (PST)

Accordion Auto Close


#1

Has anyone created a “FAQ like” page where you have multiple accordion menus that expand and close? I cannot seem to figure out how to set the interactions so that if you have one menu open and you click another accordion, I want it to close the open accordion.

I know it has something to do with setting the siblings, child, parents of the class but I don’t know which family member to blame :wink:

Thanks in advance for any tips!


Here is my public share link: LINK
(how to access public share link)


#2

Hi @spoulos

Here’s a clonable project I did a while ago.

Hope this helps! :slight_smile:


#3

@donaldsv I think he is wanting the others to close when another is clicked. Without using javascript.


#4

That’s exactly right @J_Canan. Having each item open is the easy part. Here’s a visual example of what I’m trying to do/ask…


#5

So @spoulos here is what I found out… In legacy interactions there is an option to interact with the dropdown element. You can actually use this for what you’re trying to do. Tell me if this works.

Preview Link: http://faq-no-code.webflow.io/

I can make it cloneable as well if you’d like.


#6

This is also a cloneable project I did a while back using javascript but with the previous one I showed you it requires no code. You can see the one with javascript here: http://perfect-accordion.webflow.io/

Here are the cloneable links to both:
https://webflow.com/website/Perfect-Accordion (with javascript)
https://webflow.com/website/faq-no-code?s=faq-no-code (no Javascript)


#7

Thanks so much for the tips