Headline
My fancy collapsible content.
BeefUp is a lightweight, responsive jQuery accordion plugin which allows you to toggle the visibility of Html elements with following features:
Libraries
First Include jquery library after that add plugin’s JS and CSS
HTML
Create a simple accordion with plain Html markup.
Headline
My fancy collapsible content.
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
I hope it can help you...