Easily set up an accessible accordion dropdown in all of your Webflow projects by following the simple steps below.

Based on the original build by Grace Walker Design In this how-to youtube walkthrough. With a few important additions to enable accessibility along with a small code snippet Webflow used on the No Code Conference Website FAQ page.

The accordion_item(s) are wrapped in a native webflow list element. accordion_list
The accordion trigger is a native Webflow link block. With custom aria attributes added into the element custom attributes settings. role = "button" & aria-expanded = "false"
The Item heading nested in the accordion_trigger is a native H3 or heading element.

Copy and Paste from the cloneable directly into your project the Component wrapped in blue border. accordion_list . The rich text field has been given class name of trm-text-rich-text as to not conflict with Finsweet Client First naming conventions.

To use with webflow CMS copy the accordion_item directly into the dynamic list item

And copy the code embed viewable below in the cloneable into the Before </body> tag in custom code settings.

Note: If you rename accordion_trigger or accordion_content you will need to adjust those names in the javascript code.

Thanks to Grace Walker for the original walkthrough and Finsweet for the ability to use the Client First cloneable to build this short how-to in record time.