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',   // String: Name of the trigger element
content: '.beefup__body',   // String: Name of the collapsible content
openClass: 'is-open',       // String: Name of the class which shows if a accordion is triggered or not
animation: 'slide',         // String: Set animation type to "slide", "fade" or leave empty ""
openSpeed: 200,             // Integer: Set the speed of the open animation
closeSpeed: 200,            // Integer: Set the speed of the close animation
scroll: false,              // Boolean: Scroll to accordion
scrollSpeed: 400,           // Integer: Set the speed of the scroll feature
scrollOffset: 0,            // Integer: Additional offset to accordion position
openSingle: false,          // Boolean: Open just one accordion at once
stayOpen: null,             // Mixed: Leave one item open, accepts null, integer or string
selfBlock: false,           // Boolean: Block close event on click
selfClose: false,           // Boolean: Close on click outside
hash: true,                 // Boolean: Open accordion with id on hash change
breakpoints: null,          // Mixed: Null or array of objects
onInit: function() {},      // Callback: Fires after the accordions initially setup
onOpen: function() {},      // Callback: Fires after accordion opens content
onClose: function() {},     // Callback: Fires after accordion close content
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