
BeefUp is a lightweight, responsive jQuery accordion plugin which allows you to toggle the visibility of Html elements with following features:
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.
Basic Usage:
1. Include the latest version of jQuery library and the jQuery beefup plugin at the bottom of the document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.beefup.js"></script>
2. Create a simple accordion with 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 options.
$('.demo').beefup();
4. Style the accordion whatever you want.
.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. Options and defaults.
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 selfClose: false, // Boolean: Close on click outside hash: true, // Boolean: Open accordion with id on hash change
Change log:
2018-02-07
- Fix stayOpen issue & clean up
2016-10-02
- v1.1.5: Fix style issue
2016-09-28
- Improve stayOpen functionality.
2014-09-11
- Add missing return value in click method
2014-07-18
- Improve the layout and fix some wording/markup issues
2014-07-09
- update to v1.0.1
This awesome jQuery plugin is developed by Schascha. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 07.02.2018
- Source