How do I add an accordion in Webflow?

Add the dropdown and stretch it

An accordion is not a separate element. Webflow's accordion guide uses the dropdown, because that element already opens its list on click and closes the list when the visitor clicks a different element or another part of the page. A navbar menu wants the list to float. An FAQ wants the list to take up space. The rest of the work is restyling that dropdown.

Open the Add panel, then Components, and drag Dropdown onto the canvas. Select the dropdown itself, not only the toggle, and give it a class such as Accordion item. In the Style panel, open Size and set Width to 100% so the row fills whatever holds it.

Example: a shipping page has three questions. How long does shipping take? Do you ship internationally? How do I change an address? Place three dropdowns in one section, and give each one the Accordion item class. The default list text is a stand-in. Replace it with the answer for that question, and replace the toggle text with the question.

Size the toggle to the closed row

The toggle is the bar people click. It needs to fill the row and stay a predictable height while the answer is hidden. Select the toggle, give it a class such as Accordion toggle, and set Display to flex. Set Align to center so the question sits in the middle of the bar. Then set a height. Webflow's accordion guide uses 80px as the example. Use one height for every question so the closed list looks even.

The arrow icon sits in that toggle. Give the icon a class such as Accordion icon before you animate it. A class is what lets the same rotation apply to every question, not only the first one you clicked in the Designer.

To edit the answer, select the dropdown, open the Settings panel, and click Menu, then Show. The list is hard to style while it is hidden. Show is a design view. It does not force the list to stay open on the published site.

Make the list push the page

Preview the row before you change position. The answer will open, and it will sit on top of the next question. That happens because the dropdown list is absolute by default. Absolute is what a menu uses so the links do not shove the navbar down. An accordion needs the opposite.

Select the dropdown list and set Position to static. The following questions should move down when the answer opens, and move back up when it closes. Then select the Accordion item dropdown again and set Overflow to hidden. Hidden overflow keeps the answer from painting outside the row while the row is still at the toggle height.

If the answer still covers the next question, the list you styled is not the list inside this dropdown. Check the Navigator. The list should be the child of Accordion item, and the position change should be on that list, not on the toggle.

Animate the open and the close

Static position is enough for a working accordion. Add an interaction only when the row should grow to the answer and the icon should turn. Webflow's accordion guide builds that with the Dropdown opens trigger in classic interactions.

Select Accordion item. Open the Interactions panel, add an element trigger, and choose Dropdown opens. Under Menu opens, choose Start an animation, then add a timed animation and name it Accordion opens. Add a Size action, check Set as initial state, and set the height to the same value as the toggle, such as 80px. Add a second Size action at the next moment, leave Set as initial state off, and set the height to auto so the row matches the answer.

Select the icon and add a Rotate action with Set as initial state checked, at 0 degrees on the z axis. Add another Rotate on the icon at the same moment as the auto height, and set that one to 180 degrees, with Set as initial state off. The row and the arrow then move together.

Under Menu closes, start a second timed animation, Accordion closes. Set the height back to the toggle height, and set the icon's z axis back to 0 degrees, again on the same timestamp. If only the first question animates, open the trigger settings and apply the trigger to the Accordion item class. An action that targets only the selected element will ignore the other copies.

Publish and open each question

Publish the page and click the first question. The answer should appear under the question, and the next question should move down, not sit underneath the text. Click the second question. The first answer should close, because a click elsewhere closes the dropdown. Click an empty part of the page. The open answer should close there too.

On a phone, open the longest answer. If the last lines are clipped, the close height is still applied, or overflow is hidden on a parent that never grows. Match the initial height to the toggle, set the open height to auto, and keep overflow hidden on the accordion item rather than on the whole section.

If the motion plays in the Designer and not on the live page, publish after the interaction change, then click the questions on the live URL again.