Accordion that works!

This simple tutorial will get you set in no time, using the native Webflow components. The content can be from a collection or static content.

A bonus functionality of having one expandable open at a time requires a tiny piece of custom code, but don’t you worry - I’ve got you covered with an easy-to-follow guide of how to implement it.

Let's get started.

How to get your accordion to play:

  • If using a collection - have it created and ready to use.
  • Add div elements to the page and name their classes as described in the screenshot below:

div: accordion-wrap

   → div: accordion

      → div: accordion-trigger

      → div: accordion-content

‍

  • Style the elements above as you want them to appear in the “open” state.
  • Add a Mouse click interaction to the accordion-trigger class.
    If you like my animation, feel free to clone this project and check it out. It does the following: On first click expands the Size (height) of the accordion-content from Initial state: 0px → to "Auto", and on second click shrinks it back to 0px.
  • Publish and make sure the expand/collapse functionality is working.

Bonus: Want only one expandable open at a time?

  1. Copy the code below into the “Before </body> tag” custom code.
  2. Publish and check out this added functionality.

P.s. Keep in mind the custom code magic appears only on the published site and not in Preview mode.

Done!

How do you make decisions?

Eum consequuntur mollitia dolorem quo cupiditate qui.

Sed nihil quis provident quisquam consequatur. Omnis voluptas quia. Aliquid neque voluptate quis sequi enim.

What's your close call story?

Velit aperiam ad est vel eligendi enim.

Dolores ea dolores dignissimos voluptatem hic eos quia. Id dolorem architecto. Fugit accusamus tempora.

What doesn't exist, but should?

Exercitationem facilis repellendus mollitia illo excepturi.

Sed est pariatur temporibus voluptas veniam sit. Dolor ratione voluptate. Sit dolorem vel repellendus reiciendis. Deleniti quia ab rerum vel aut quo quos voluptates eligendi. Accusamus laudantium aut nesciunt nemo.

What's your opinion on cell phones?

Qui consectetur consequatur adipisci magnam enim mollitia omnis est aperiam.

Est voluptatem repudiandae possimus nisi architecto ut minima dolores. Et sint dolor inventore. Deleniti temporibus rem.

Do you name inanimate objects?

Quos recusandae ea sed velit aut quam quas sed eum.

Dolorem et eius aut animi delectus itaque quos. Provident dolorum explicabo impedit tenetur eum. Alias quo deserunt necessitatibus quo culpa enim. Nam ut facilis dolore aliquam quos.