Simple jQuery Accordion Plugin – BeefUp

by Posted on

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.

jquery-accordian-plugin


Libraries

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

HTML

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>
</article>

JS

Call the plugin

$(function() {
        $('.beefup').beefup();
    });




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.

DEMO | DOWNLOAD

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


Published by admin