The Top 24 Accordion Webflow cloneables

An FAQ accordion for Webflow that includes all of the Webflow interactions to make it work. This accordion offers a simple design and is fully responsive with prebuilt interactions to make the magic happen.

Here's a way of having the first accordion item open on page load on Webflow. With a little bit of jQuery this enables you to have the first item open on the page load on your Webflow site.

A dark themed accordion for Webflow built with native Webflow interactions. This accordion features expanding animation/interaction and expanding/closing icons. This technique uses no custom code and relies solely on Webflow's native interactions.

A smooth and easy to implement jQuery accordion for Webflow. This accordion was built using jQuery rather than manually creating all of the interactions in Webflow. This is perfect if you don't want to mess around with Webflow interactions or aren't comfortable with using interactions. You'll find the custom jQuery code for this accordion within the custom code in the page settings. In this jQuery code you signify the speed of opening the accordion, close all other accordions if another one is opened, activate scroll to top for active item, the offset of that scroll and the delay before being moved to that item. You'll then update your class names based on if you updated them in your designs. Overall this is a clean and easy to use jQuery animated accordion if you aren't someone that wants to utilize Webflow interactions.

Here's a way to add a full page, horizontal accordion to your Webflow site. Using this method you can change the traditional horizontal accordion design to a full page, vertical accordion. Please note that this uses custom code found within the body section of the Page settings.

Here's a FAQ accordion with lottie interactions for Webflow. Perfect for adding an accordion to your Webflow site with a nice lottie animation for opening and closing the accordion.

A fullscreen photo accordion with hover over interactions for Webflow. This Webflow cloneable features a unique full screen accordion powered by Webflow's native CMS system. When a user hovers over each card the card expands to show a larger image and detailed information about the accordion. While a majority of the effects were created with Webflow's native interactions there is some custom code that needs to be applied.

A FAQ section with a sticky sidebar and accordions for various FAQ questions.

Quality FAQ accordions designed and ready to be cloned for Webflow. Three variations of FAQ Accordions with predesigned Webflow interactions with modern design aesthetics. The first variation features large expandable cards with drop shadows and card highlighting all built with Webflow interactions. When selecting the card the arrow icon changes direction and becomes blue, the card also features an outline to let you know that it's been expanded. The second variation features tabs for extra FAQs and to help split your FAQ up by topics. This is a great way to feature a ton of FAQ questions on your page without taking up valuable real estate. The third variation is a grid form that also allows you to feature more questions in a smaller space, although the limited space means that large FAQs may not be ideal for this FAQ accordion.

Are you looking to use Webflow tabs with a rich text CMS field? By default Webflow doesn't allow rich text fields to be placed in the tabs by default. This technique uses a bit of JavaScript so if you change the classes be sure to update the code within the page settings. The arrows in this demonstration are from Font Awesome and the colors can also be updated in the page settings.

An interactive accordion design for your Webflow site. This design is a full width accordion built with all necessary open and close interactions as well as a custom mouse cursor design.

Here's a dark design full width large accordion with interactions for Webflow. An easy way to add a huge accordion to your Webflow site.

A creative, yet difficult to implement variation of Webflow accordions that utilizes a combination of position sticky, CSS Grid and the power of mix-blend-mode to create the powerful overlays. This is primarily no-code but does include bits of JS to achieve the link jumps and another one to reset the scroll position when the item has been closed. A few notes is that this doesn't work well in Safari and adding new items means that you need to add more JS in the page settings. Jump links are positioned to absolute elements within each dropdown, so you'll need to add new ones with new IDs for those to work. The interaction animations are really well done, when a user opens and expands an accordion item the title pops to the top of the page and the content comes in from the bottom. It also allows the user to bounce around various sections of each accordion item as previously mentioned.

Easily add dynamic and interactive FAQ sections with accordions and slide in interactions to your Webflow site. There are 5 different designs that include scroll into view interactions as well as expanding/closing accordions, tabs and more.

Here's a simple way to create tall horizontal accordions within Webflow. This is implemented using interactions, some custom CSS properties for the vertical text, and a touch of magic. There is a lot of math involved with this implementation and will need to be modified if you want to remove or add any accordions.

A fully built FAQ accordion section powered by Webflow native CMS collection with native interactions and animations. A great way to add a frequently asked question section to your Webflow site or clients site that is powered by the Webflow CMS system.

A CMS driven accordion calendar for Webflow. Perfect for an events page or about page on your Webflow site. In order to use this be sure to copy the hidden section which includes an unbounded CMS design.

A simple, yet elegant accordion interaction for your Webflow site. This accordion has pre-built interactions so that when a user clicks on the accordion the information is expanded and then closed on second click.

Add a hover over highlight animation to your accordions in Webflow. This adds another layer of dynamic effects to your accordions when hovering. No custom code needed and all done via interactions in Webflow.

A frequently asked questions FAQ expanding accordion interaction for Webflow. The interaction expands and then collapses the accordion based on each click.

A modern cloneable accordion grid for Webflow. This accordion grid is a free and easy copy and paste cloneable built with all necessary interactions so that you can quickly add an accordion to your Webflow project.

Accesible Webflow components library consisting of accordion, menu and an accessible Modal. This cloneable features three core components as well as a thorough description describing important accessibility characteristics and methodologies. This uses Finsweet's client first system and Webflow javascript snippets.

An accordion with Native tabs absolute sidebar navigation for Webflow. This combines the power of the accordion and native Webflow tabs element with some minor custom code for the numbering of each category. Due to this the method will not work for Webflow CMS. Perfect for an online course, learning module or similar style site.

A beautifully designed pricing page for recurring services in Webflow. The pricing page template has monthly and annual toggle interactions, additional perks/plans/discounts information, an accordion FAQ, footer and navbar.