How To Make Accordion In Webflow

‍

Here is how to make an Accordion in Webflow:

1. Begin by inserting a wrapper element positioned correctly to contain your accordion.
2. Now to create the actual accordion, go to the Add Elements tab from the left sidebar menu.
3. Search for the Dropdown element. This element contains most of the functionality required from an accordion so it serves as a great starting point. Simply drag and drop it to insert.
4. With the dropdown element inserted, adjust its width to resemble an accordion.
5. Now, let's change the text to be an actual question or heading.
6. Simply double click and edit the text.
7. At this point, use the Preview mode from the top right button to see how it works.
8. Notice that our default list overflows onto other elements.
9. Back inside the designer, go to the Navigator tab from the left sidebar menu.
10. Select the Dropdown List under the Dropdown Toggle.
11. Locate the Position section on the right sidebar menu.
12. Set this to Static to fix the overflow.
13. Also consider changing the background and colors of your dropdown list.
14. You can also choose to delete the links and replace it with another form of content in your accordion.
15. For our example, we'll add a paragraph to open up under the dropdown.
16. Use the Navigator to make sure the paragraph is placed inside the Dropdown List.
17. If not, simply drag it to the correct position.
18. Back inside the Preview mode, click on the accordion to expand like a dropdown.
19. This makes our answer reveal below it.
20. We can now duplicate this to create an entire accordion section. To do so, simply select and copy the wrapper element that contains all elements and paste.
21. You now have a list of FAQs in your accordion that will each expand on click.
22. You now have a simple yet fully functional accordion in Webflow. You can continue modifying it by adding styles, animations, etc.