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.
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.
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.
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.
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 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.
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.