Simple jQuery Accordion Plugin – BeefUp

BeefUp is a lightweight, responsive jQuery accordion plugin which allows you to toggle the visibility of Html elements with following features:

  • Multiple accordions on one page.
  • Toggle Html elements via JS or CSS.
  • Multi-level accordions with nested Html elements.
  • Fade or slide animations.
  • Callback support.



First Include jquery library after that add plugin’s JS and CSS.

<script src="js/jquery.min.js"></script>
<script src="js/jquery.beefup.min.js"></script>
<link rel="stylesheet" href="css/jquery.beefup.css">


Create a simple accordion with plain Html markup.

<article class="beefup">
    <h2 class="beefup__head">Headline</h2>
    <div class="beefup__body">My fancy collapsible content.</div>


Call the plugin

$(function() {

By default the accordion will slide down and up. It is possible to set the animation type to “slide”, “fade” or leave empty “” and to define the open and the close animation speed. See List of configuration you can use to customize the plugin.

trigger: '.beefup__head',   
content: '.beefup__body',   
openClass: 'is-open',       
animation: 'slide',         // String: Set animation type to "slide", "fade" or leave empty ""
openSpeed: 200,             
closeSpeed: 200,            
scroll: false,              
scrollSpeed: 400,           
scrollOffset: 0,            
openSingle: false,          
stayOpen: null,             
selfBlock: false,           
selfClose: false,           
hash: true,                 
breakpoints: null,          
onInit: function() {},      
onOpen: function() {},      
onClose: function() {},     
onScroll: function() {}     // Callback: Fires after scroll animation

See live demo and download source code.


This awesome plugin is developed by Schascha. Visit their official github repository for more information and follow for future updates.