beefup v1.5.0
BeefUp
Just a jQuery accordion plugin
https://schascha.github.io/BeefUp/
Examples:
Installation
You can use BeefUp in your project by installing it using npm:
npm install beefup --saveUsage
Include jQuery
<script src="dist/js/jquery.min.js"></script>Include plugin
<script src="dist/js/jquery.beefup.min.js"></script>Add styles
<link rel="stylesheet" href="dist/css/jquery.beefup.css">Add markup
<article class="beefup"> <h2 class="beefup__head">Headline</h2> <div class="beefup__body">My fancy collapsible content.</div> </article>Call the plugin
<script> $(function() { $('.beefup').beefup(); }); </script>
Configuration
| Option | Type | Default | Description |
|---|---|---|---|
| accessibility | boolean | true | Enable accessibility features like tab control |
| trigger | string | '.beefup__head' | Selector of the trigger element |
| content | string | '.beefup__body' | Selector of the collapsible content |
| openClass | string | 'is-open' | Name of the class which shows if a accordion is triggered or not |
| animation | string | 'slide' | Set animation type to "slide", "fade" or leave empty "" |
| openSpeed | integer | 200 | Set the speed of the open animation |
| closeSpeed | integer | 200 | Set the speed of the close animation |
| scroll | boolean | false | Scroll to accordion on open |
| scrollSpeed | integer | 400 | Set the speed of the scroll animation |
| scrollOffset | integer | 0 | Additional offset to accordion position |
| openSingle | boolean | false | Open just one accordion at once |
| stayOpen | mixed | null | Leave items open, accepts null, integer (index) or string (selector, "first" or "last") |
| selfBlock | boolean | false | Block close event on click |
| selfClose | boolean | false | Close accordion on click outside |
| hash | boolean | true | Open accordion with id on hash change |
| breakpoints | array | null | Array of objects, see example |
| onInit | function | null | Callback: Fires after the accordions initially setup |
| onOpen | function | null | Callback: Fires after the accordions initially setup |
| onClose | function | null | Callback: Fires after the accordions initially setup |
| onScroll | function | null | Callback: Fires after the accordions initially setup |
Advanced
API Methods
var $beefup = $('.beefup').beefup();Open
$beefup.open($('#beefupID'));Close
$beefup.close($('#beefupID'));Click
$beefup.click($('#beefupID'));Scroll
$beefup.scroll($('#beefupID'));Callbacks
$('.beefup').beefup({
onInit: function ($this) {
// Do something after initially setup
},
onOpen: function ($this) {
// Do something after accordion open the content
},
onClose: function ($this) {
// Do something after accordion close the content
},
onScroll: function ($this) {
// Do something after scroll animation
}
});HTML5 data attributes
<article class="beefup" data-beefup-options='{"animation": "", "openSpeed": 800}'>
...
</article>Bugs? 🐛
Please let me know: https://github.com/Schascha/BeefUp/issues
Buy me a Coffee ☕
Support this project and others via PayPal. Thanks
Changelog
Detailed changes for each release are documented in the release notes.
License
Copyright (c) 2014-present Sascha Künstler
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
7 years ago
8 years ago
9 years ago
9 years ago
9 years ago