How To Make Accordion In Webflow
Here is how to make an Accordion in Webflow:
- Begin by inserting a wrapper element positioned correctly to contain your accordion.
- Now to create the actual accordion, go to the Add Elements tab from the left sidebar menu.
- 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.
- With the dropdown element inserted, adjust its width to resemble an accordion.
- Now, let's change the text to be an actual question or heading.
- Simply double click and edit the text.
- At this point, use the Preview mode from the top right button to see how it works.
- Notice that our default list overflows onto other elements.
- Back inside the designer, go to the Navigator tab from the left sidebar menu.
- Select the Dropdown List under the Dropdown Toggle.
- Locate the Position section on the right sidebar menu.
- Set this to Static to fix the overflow.
- Also consider changing the background and colors of your dropdown list.
- You can also choose to delete the links and replace it with another form of content in your accordion.
- For our example, we'll add a paragraph to open up under the dropdown.
- Use the Navigator to make sure the paragraph is placed inside the Dropdown List.
- If not, simply drag it to the correct position.
- Back inside the Preview mode, click on the accordion to expand like a dropdown.
- This makes our answer reveal below it.
- 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.
- You now have a list of FAQs in your accordion that will each expand on click.
- You now have a simple yet fully functional accordion in Webflow. You can continue modifying it by adding styles, animations, etc.