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)
Here’s a clonable project I did a while ago.
Hope this helps!
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.
Here are the cloneable links to both:
Thanks so much for the tips
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
Kudos, though, to @Noah-R for providing both. Awesome community of some sharp people. Thank you!
Webflow - MILKSHAKEN
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.