BeefUp is a lightweight and responsive jQuery accordion plugin that allows you to toggle the visibility of HTML elements.
plus minus expand collapse html, jquery accessible accordion, jquery accordion with plus minus, jquery hierarchical accordion tree, jquery responsive accordion
Features:
- Multiple accordions on one page.
- Can reach.
- Switch HTML elements via JS or CSS.
- Multilevel accordion with nested HTML elements.
- Fade out animation or slides.
- Callback support.
How to make use of it:
1. Include the newest model of the jQuery library and the jQuery beefup plugin on the bottom of the doc.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="jquery.beefup.js"></script>
2. Create an easy accordion with a plain Html structure.
<article class="demo"> <h2 class="beefup-head">Accordion Header</h2> <div class="beefup-body"> <p>Accordion Body</p> </div> </article>
3. Call the plugin with default choices.
$('.demo').beefup();
4. Style the accordion whatever you need.
.beefup-head { cursor: pointer; position: relative; } .beefup-head:after { border-style: solid; border-width: 12px 12px 0 12px; border-color: #ddd transparent transparent transparent; content: ''; position: absolute; right: 0; height: 0; margin-top: -6px; top: 50%; width: 0; } .open > .beefup-head:after { border-width: 0 12px 12px 12px; border-color: transparent transparent #ddd transparent; }
5. Available choices and defaults.
$('.demo').beefup({ // Boolean: Enable accessibility features like tab control accessibility: true, // String: Name of the trigger element trigger: '.beefup__head', // String: Name of the collapsible content content: '.beefup__body', // String: Name of the class which shows if a accordion is triggered or not openClass: 'is-open', // String: Set animation type to "slide", "fade" or leave empty "" animation: 'slide', // Integer: Set the speed of the open animation openSpeed: 200, // Integer: Set the speed of the close animation closeSpeed: 200, // Boolean: Scroll to accordion scroll: false, // Integer: Set the speed of the scroll feature scrollSpeed: 400, // Integer: Additional offset to accordion position scrollOffset: 0, // Boolean: Open just one accordion at once openSingle: false, // Mixed: Leave one item open, accepts null, integer or string stayOpen: null, // Boolean: Close on click outside selfClose: false, // Boolean: Block close event on click selfBlock: false, // Boolean: Open accordion with id on hash change hash: true, // Mixed: Null or array of objects breakpoints: null });
6. Callback features.
$('.demo').beefup({ onInit: function() {}, onOpen: function() {}, onClose: function() {}, onScroll: function() {} });
Lightweight jQuery Accordion Plugin To Show and Hide Elements, BeefUp Plugin/Github, jquery expand collapse div plus minus, simple accessible accordion
See Demo And Download
Official Website(Schascha): Click Here
This superior jQuery/javascript plugin is developed by Schascha. For extra Advanced Usages, please go to the official website.
Be First to Comment