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 --save
Usage
-
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
600 Dec 8, 2022
1 Dec 16, 2022
7 Dec 20, 2022
1 Dec 16, 2020
59 Oct 8, 2022
4 Dec 8, 2022
4 Dec 18, 2022
191 Dec 30, 2022
18 Feb 10, 2022
37 Dec 5, 2022
1 Aug 10, 2022
2 Nov 7, 2021
1.6k Dec 31, 2022
1 Aug 22, 2022
12 Aug 7, 2022
2 Sep 28, 2021
2 Mar 10, 2022