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 
Thanks in advance for any tips!
Here is my public share link: LINK
(how to access public share link)
@donaldsv I think he is wanting the others to close when another is clicked. Without using javascript.
That’s exactly right @Noah-R. Having each item open is the easy part. Here’s a visual example of what I’m trying to do/ask…
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.
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)
Thanks so much for the tips
Cool!
Any chance there is a new solution that does not require the legacy interactions?
This seems to be a good work around using dropdown elements:
FYI, for future viewers, I sadly discovered a major flaw with the no-code version: apparently, after you open any of the items, they no longer adjust to changes in viewport width, or do so in odd unexpected ways 
Just gave the Javascript version a spin, and it seems like it does not have this problem. So, when I actually have a functioning brain in the morning, I will try to implement that one. Still boggles the mind the Webflow doesn’t seem to support this; their tutorial clearly falls short of what we’ve been seeing on the web for years.
Kudos, though, to @Noah-R for providing both. Awesome community of some sharp people. Thank you!
Yup. That’s why I always use javascript. You can’t rely on the native Webflow option.
I believe I got it working, fully responsive and no javascript. Have a look and let me know if you find any problems, if you think it’s good I’ll make it clonable so other people can use it.
Published site is milkshaken.net
Making it adjust to viewport changes was easy: I only added width: auto in @Noah-R 's version.
But that 80px was bugging me coz I set my type in VW, and it just wouldn’t animate properly if I set it to anything other than pixels.
So I restructured it to piggy-back on the dropdown trigger and then animate the dropdown content instead, and by adding a show/hide step and setting the wrapper to size automatically, it finally became responsive.
Maybe that’s all too convoluted, but I can’t code so… 
I was also looking for a good working solution for a while. Problem of the examples above imho is that they mess up your design, because all questions (accordions) are open in design mode.
I have found a solution where this is not happen and which is made with a very simple interaction. Okay, it’s a Legacy Interaction, but after setting up once you don’t have to worry about it anymore.
Kudos 
for @JoeHabgood for his cloneable project:
I’ve used it in my recent project: Auctoraat Faq
@Wouter_Dam It looks good!
In my example the accordion “innards” are only open when you want them to be i.e while you are styling them. Once you have styled the accordion how you want it, the innards are set to display: hidden, and I use a hide/show interaction on them on dropdown open/ close. Looks and behaves exactly as on the published page, with no need for code or legacy interactions.
Plus that way you get 0 cumulative layout shift attributable to that component, which is important for your performance score.
I found a solution using no-code and new interactions. You need to apply 2 click events to each accordion item.
First click event – Close all accordion-items. Use triggers that affect all classes. Apply trigger settings to “class”.
Second click event – Open single accordion-item. Apply trigger settings to “element”. Add this click event to every accordion-item. Use triggers that affect only the selected element.
I just figured this out. If you need a demo link, I can make one.
Thank you for sharing!
Hey! I’m having an issue with the two triggers interfering with each other. Any help here would be appreciated.
Hey all, I was dealing with this on a client project and decided to create a cloneable to help others who may face this in the future. Webflow interactions were a headache so I just went with javascript.
Thank you for this Solution, but the page is not cloneable, any way you could change this?
