Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/schascha/beefup
Just a jQuery accordion plugin
https://github.com/schascha/beefup
accordion collapsible css javascript jquery plugin
Last synced: about 3 hours ago
JSON representation
Just a jQuery accordion plugin
- Host: GitHub
- URL: https://github.com/schascha/beefup
- Owner: Schascha
- License: mit
- Created: 2014-07-05T15:33:09.000Z (over 10 years ago)
- Default Branch: main
- Last Pushed: 2024-10-01T05:11:24.000Z (about 2 months ago)
- Last Synced: 2024-10-16T02:33:11.000Z (about 1 month ago)
- Topics: accordion, collapsible, css, javascript, jquery, plugin
- Language: JavaScript
- Homepage: https://schascha.github.io/BeefUp/
- Size: 2.86 MB
- Stars: 44
- Watchers: 4
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# BeefUp
[](https://github.com/Schascha/BeefUp/actions)
[](https://www.npmjs.com/package/beefup)
[](https://www.jsdelivr.com/package/npm/beefup)
[](https://packagephobia.com/result?p=beefup)
> Just a jQuery accordion plugin
https://schascha.github.io/BeefUp/
**Examples:**
* [Toggle buttons](https://jsfiddle.net/Schascha/2Lzmfdb1/)
* [Hashchange](http://jsfiddle.net/Schascha/kovejmab/)
* [CSS animations](https://jsfiddle.net/Schascha/ohb07vzq/)
* [Self block](https://jsfiddle.net/Schascha/cek0g8ah/)
## Installation
You can use BeefUp in your project by installing it using [npm](https://www.npmjs.com/package/beefup):
```sh
npm install beefup --save
```
## Usage
1. Include jQuery
```html
```
2. Include plugin
```html
```
3. Add styles
```html
```
4. Add markup
```html
Headline
My fancy collapsible content.
```
5. Call the plugin
```html
$(function() {
$('.beefup').beefup();
});
```
## 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](https://schascha.github.io/BeefUp/#breakpoints)
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
```javascript
var $beefup = $('.beefup').beefup();
```
#### Open
```javascript
$beefup.open($('#beefupID'));
```
#### Close
```javascript
$beefup.close($('#beefupID'));
```
#### Click
```javascript
$beefup.click($('#beefupID'));
```
#### Scroll
```javascript
$beefup.scroll($('#beefupID'));
```
### Callbacks
```javascript
$('.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
```html
...
```
## Bugs? 🐛
Please let me know: https://github.com/Schascha/BeefUp/issues
## Buy me a Coffee ☕
Support this project and [others](https://github.com/Schascha?tab=repositories) via [PayPal](https://www.paypal.me/LosZahlos). Thanks
## Changelog
Detailed changes for each release are documented in the [release notes](https://github.com/Schascha/BeefUp/releases).
## License
[MIT](./LICENSE)
Copyright (c) 2014-present Sascha Künstler