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.
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.
|
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.
This awesome plugin is developed by Schascha. Visit their official github repository for more information and follow for future updates.
