Accordion dropdown arrow - Webflow interactions & animations tutorial

[@jesshurf]

Just wanted to note that a step is missing - I had to go back and adjust the cursor to change from the arrow to the hand to indicate that the arrow was clickable. I had done this for the text box from the earlier video, but it did not apply when I added the arrow icon.

[@LochmuellerGroup]

Is there a way to make this responsive to mobile view? On a mobile phone it locks in the width when the dropdown is clicked, and when I rotate my phone to the landscape view it keeps the narrow widths and vice versa.

[@BingbongLirio]

Another Webflow constraints for development. Do we really have to build this on scratch? why don't you just include this in the components?

[@smondello]

Cool, but a lot easier if the accordion was just a simple widget to drag and drop.

[@bennpinto9115]

Yes, please 😅

[@fredfontes]

Wow, this is it!

[@huongnguyen-rh2rp]

The video sound is pretty good, beyond my imagination

[@fabianpeterkin9710]

Is there a part one of this tutorial? Seems there are already animations applied to the div that control the text.. I'm not following this particular tutorial.

[@Webflow]

Here are some clonables that may be able to help you: webflow.com/websites/accordion

[@fbnoanonymo7114]

@@Webflow awesome, thank you! I actually found the other video tutorial on menu drop-downs 🙌

[@nsastef]

so, no one is bothered by the elaborate plan for world domination which was mistakenly exposed by the clumsy assistant Stacy🤣

[@gilsinhonunes]

How to make just one item open at time. IE.: when click to toggle something open, every other item collapse.

[@StefanLeles]

Gilson Nunes Filho I've the Dame question :(

[@Webflow]

Hey guys, we'll use the same interaction but tweak it a bit. We'll use two triggers: The first trigger closes all content, the second trigger opens the sibling content. That's it! See how in this video: cl.ly/0D2g3w3S222J. Note the order of the triggers is important - you'll want to close all content before opening the content you want. Hope this is helpful. If you're having any trouble implementing this animation, you can always post on the Webflow Community Forum (forum.webflow.com/) with as much information as possible (read-only link, screenshots and a description of the issue), and our amazing community and staff can help you there.

[@bjorngrauers]

some constructive critique! please add this to your tutorials in the future. It would have saved me a great amount of time. But I very happy I found this post, and I'm stoked about your product. It's truly amazing and the tutorials are super efficient! Keep up the good work!

[@strangerthanfictionstudios]

@@Webflow Thank God

[@rutheronajaeballenas-muril3945]

Hi, I can't seem to put my arrow beside the Heading. It always go under the heading. I followed all of your steps properly, it's just that arrow placement problem.

[@simonjgiddings]

I was having the same issue. In the layout menu - display - choose inline for both the text and the arrow. Then set the width of the text to 95% to push the arrow to the right.

[@peterzeitz8793]

Try making it flex display with horizontal direction (Under Layout panel). You need to nest them in a div.

[@great567]

Weird. When I drag the arrow it falls under the header by default.

[@vickysultan08]

Me too. I have adjusted the header width to 10% but it doesn't goes inline with the arrow. I wonder why..

[@siddharthkp68]

@@vickysultan08 go-to side section in accordion item trigger in layout section you can see display section click the second option

[@marcossuzuki7081]

I think there is a bug with this at the moment. The action works fine, but when I change the affected class as explained in the video, the action stops working and I can´t play it anymore. I tested many times and somehow it stops working and I can play the action anymore. It just works if I set the affected class as an element. Is anyone having the same problem?

[@Webflow]

Hi Marcos, can't seem to be able to replicate your issue on my end. If you're still having trouble with this animation, you can please post on the Webflow Community Forum (forum.webflow.com/) with as much information as possible (read-only link, screenshots and a description of the issue), and our amazing community and staff can help you there.

[@AlexMorellon]

For anyone having this problem : you must verify the hierarchy of your elements !! if it works with "all elements" and not with "siblings" you probably messed up somewhere. at the end of this post, there is a project you can use to double-check your navigator : university.webflow.com/article/accordion. other people might also have issues with their "overflow hidden" parameter. check this : forum.webflow.com/t/accordion-help-please/44368/6 hope it helps ! ;)

[@fredfontes]

How about to add a default function called accordion? 🤡

[@DungNguyenVan-es2rz]

The video sound is pretty good, beyond my imagination