How To Make Accordion In Webflow

Quick summary

Building an accordion in Webflow requires no custom code — you can use the built-in Dropdown element as a base and configure it to expand and collapse content on click. Once styled and duplicated, the result is a fully functional FAQ accordion that works natively in Webflow's designer.

Steps

1. Insert a wrapper element positioned correctly to contain your accordion.
2. Open the Add Elements tab from the left sidebar menu to begin building the accordion.
3. Search for the Dropdown element and drag and drop it onto the canvas — it provides most of the accordion functionality out of the box.
4. With the Dropdown element inserted, adjust its width to resemble an accordion layout.
5. Change the toggle text to an actual question or heading for your accordion item.
6. Double-click the toggle label to edit the text directly on the canvas.
7. Use Preview mode from the top-right button to see how the accordion behaves.
8. Notice that the default dropdown list overflows onto other elements — this needs to be fixed.
9. Return to the designer and open the Navigator tab from the left sidebar.
10. Select the Dropdown List nested under the Dropdown Toggle in the Navigator.
11. Find the Position section in the right sidebar panel.
12. Set the position to Static to fix the overflow issue.
13. Optionally, change the background color and text colors of the dropdown list to match your design.
14. Optionally, delete the default links inside the dropdown list and replace them with custom content.
15. Add a paragraph element to display answer text that opens beneath the accordion toggle.
16. Use the Navigator to confirm the paragraph is placed inside the Dropdown List.
17. If the paragraph is misplaced, drag it to the correct position inside the Dropdown List.
18. Switch to Preview mode and click the accordion to verify it expands like a dropdown.
19. Confirm the answer content reveals below the toggle when clicked.
20. Duplicate the wrapper element and paste it to create additional accordion items for a full FAQ section.
21. You now have a list of FAQ items that each expand on click.
22. Your accordion in Webflow is complete — continue refining it by adding styles and animations as needed.