Javascript Powered Accordion - Auto closes on new click

*This was taken from a previous project of mine. Please note, if you update the classes please update in the Javascript code where necessary
Code is in page settings and in before Body
- CSS for animation
- Javascript for functionality
- Technical SEO optimised.
Prevents Webflow’s Auto-Collapse Issues
Accordian Arrow

The accordion ensures fluid transitions with smooth open/close animations, making content more engaging and user-friendly.

Better Accessibility & SEO
Accordian Arrow

Built-in ARIA attributes (aria-expanded and role="button") help screen readers understand the content structure, improving SEO and usability for all users.

Lightweight & Optimized for Webflow
Accordian Arrow

The code is pure JavaScript—no need for heavy libraries like jQuery. This keeps your site fast and efficient, reducing unnecessary load times.

Webflow’s native interactions can be heavy if multiple accordions are on the page, slowing down the designer. This fixes the issue.

This JavaScript-based accordion toggles height efficiently (max-height: dropdown.scrollHeight + 'px'), reducing unnecessary re-renders.

Mobile-Friendly
Accordian Arrow

Only one section opens at a time, preventing long content lists from overwhelming mobile users. The accordion is fully responsive for all devices.

Fully Customizable
Accordian Arrow

Easily update how you wish -- but please remember if you change any classes

Any Questions, please get in contact
www.roberttrew.com