Simple Accordion Interaction

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

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.

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.

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

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.

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

A clean menu and navigation dropdown design for your Webflow site. When a user hovers over the navigation bar the secondary menu drops down with a nice animation effect.

A slick split hero slider design with unique slider transitions that rotate both half of the pages in different directions upon each slide. Perfect for a unique hero section in Webflow that allows for an eye catching and dynamic hero slider section.

A smokey button design with interactions and hover state animations.

An easy to implement tooltips for your Webflow site. With this cloneable you can easily add tooltips to your Webflow sites.

A clean and modern Webflow menu navigation design with hover over interactions/animations. A perfect cloneable to get your Webflow site started with a modern and aesthetically pleasing menu navigation. Upon hovering on a navigation link their's an interaction that shows a growing underline.

Here's a great blog post card design with hover interactions perfect for any Webflow site. When the user hovers over the card the image is zoomed in, becomes brighter and the authors details are shown.

A perfect product preview card interaction and animation that upon card click shows an image preview modal window in Webflow. A great product card design with pre-built interactions and animations that are perfect for your ecommerce or product/sales pages.