Simple JQuery Accordion

</ head>

<!-- Closes Simple JQuery Accordion Bodies on Published Site --> 
<style>
/* Hide Accordion Body */
.acc-body {
	display: none;
}
</style>

</ body>

<!-- Simple JQuery Accordion --> 
<script>
// wrap your code in a jQuery closure
// this is optional 
// it ensures the '$' used in your code refers to 'jQuery'
// this avoids clashing with any other code that might also be referencing '$' to mean something else
(function ($) {
	'use strict'; // indicates that code within the closure should be executed in strict mode
  	// Targeting the head/button of the accordion item to run a function when it's clicked
		$('.acc-head').on("click", function () {
    	// Looking for the next sibling within this accordion item, which is the body (for content) of the accordion to show and slide open  
			$(this).next().slideToggle(300); // 300 is the milliseconds on open
      // Finds any body of any accordion that is NOT the one currently being clicked on to hide and slide closed
			$('.acc-body').not($(this).next()).slideUp('fast');
		});
}(jQuery));
</script>

HTML/Embed

Author
Noah Raskin
Published
Nov 13, 2020

How to use:

After the code is pasted in the proper locations (</ head> & </ body>) we can start to structure it in Webflow. The HTML structure is super simple and very flexible. We just need to make sure it has at least 3 parts, the .acc-item, .acc-head and .acc-body and that's it. See the image below for the structure.

HTML (Element) Structure in Webflow. Note: you can use divs for each of these.

The Structure & Function

You can rename these to whatever you'd like. I simply chose .acc- because I figured this class naming structure would be easily adaptable in most if not all projects and wouldn't clash with any of your existing classes.

So once you have your structure you can place any other element inside your accordion head and body and it will just work. The .acc-wrap class (parent wrapper) contains all your accordion items. You can have as many of these as you want. You can even give them different id's if you have a sidebar nav to scroll to different FAQ category sections for example.

The CSS

The simple CSS just has one purpose and that is to automatically close/hide all the accordion bodies on your published site. If we didn't have this we would have to set the .acc-body class to display: none before we published our site. With this one line of code we don't have to and now they can stay open in the editor so we can edit them whenever we need to.

Last Thing: Active State

Last thing. If you need an "active/opened" state so one of the FAQ's are opened by default or on load then just add a class and call it .active or .acc-active (whatever you want) and set it's display to block or flex or however you have it styled originally. Just display it the same. For example if your .acc-body is already set to display: block, then once you add the active class just click the block icon once more and that's it. Just like the image below 😉

Tutorial Coming Soon!

Check Browser Support

Interactive Table

Comments

Unfortunately at this time we don't have SSO for comments so you will have to sign up separately to leave your comment. Thanks for understanding!

This simple script will allow you to easily turn a simple html structure into a nice minimal accordion. This script is just for a simple FAQ accordion that you can use for product pages etc.

Clone Project
Documentation
Author:
Built by
Built with
For the best experience

Please switch to desktop to view the content.

Back Home
Thank you! Your submission has been received!
Close Form
Oops! Something went wrong while submitting the form.
Become a Contributor