Simple JQuery Accordion

Function

</ head>

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

</ body>

<!-- Simple JQuery Accordion --> 
<script>
  (function ($) {
    'use strict'; 
      // 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

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

Only tabs with a " " have code.

<!-- Simple JQuery Accordion --> 
<script>
  (function ($) {
    'use strict'; 
      // 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>

Only tabs with a " " have code.

If you have already pasted this code into your project then you can skip this. If you haven't, and it's your first time using CodeCrumbs, then copy this code and navigate to your sites global settings > Custom Code tab > paste it into the <head> (first custom code block). It just needs to exist once.

Author

Noah Raskin

Updated on

May 8, 2024

Demo

See Demo

How to use:

Unlock more with PRO

Want to learn how to use this Crumb? Unlock detailed documentation, video tutorials, comments & support!

Upgrade to Pro

Unlock more with PRO

Want to learn how to use this Crumb? Unlock detailed documentation, video tutorials, comments & support!

Upgrade to Pro

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 😉