1 | # BeefUp
|
2 |
|
3 | [![Build](https://github.com/Schascha/BeefUp/workflows/Build/badge.svg)](https://github.com/Schascha/BeefUp/actions)
|
4 | [![npm](https://img.shields.io/npm/v/beefup)](https://www.npmjs.com/package/beefup)
|
5 | [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/beefup/badge)](https://www.jsdelivr.com/package/npm/beefup)
|
6 | [![install size](https://packagephobia.com/badge?p=beefup)](https://packagephobia.com/result?p=beefup)
|
7 |
|
8 | > Just a jQuery accordion plugin
|
9 |
|
10 | https://schascha.github.io/BeefUp/
|
11 |
|
12 | **Examples:**
|
13 |
|
14 | * [Toggle buttons](https://jsfiddle.net/Schascha/2Lzmfdb1/)
|
15 | * [Hashchange](http://jsfiddle.net/Schascha/kovejmab/)
|
16 | * [CSS animations](https://jsfiddle.net/Schascha/ohb07vzq/)
|
17 | * [Self block](https://jsfiddle.net/Schascha/cek0g8ah/)
|
18 |
|
19 | ## Installation
|
20 |
|
21 | You can use BeefUp in your project by installing it using [npm](https://www.npmjs.com/package/beefup):
|
22 |
|
23 | ```sh
|
24 | npm install beefup --save
|
25 | ```
|
26 |
|
27 | ## Usage
|
28 |
|
29 | 1. Include jQuery
|
30 |
|
31 | ```html
|
32 | <script src="dist/js/jquery.min.js"></script>
|
33 | ```
|
34 |
|
35 | 2. Include plugin
|
36 |
|
37 | ```html
|
38 | <script src="dist/js/jquery.beefup.min.js"></script>
|
39 | ```
|
40 |
|
41 | 3. Add styles
|
42 |
|
43 | ```html
|
44 | <link rel="stylesheet" href="dist/css/jquery.beefup.css">
|
45 | ```
|
46 |
|
47 | 4. Add markup
|
48 |
|
49 | ```html
|
50 | <article class="beefup">
|
51 | <h2 class="beefup__head">Headline</h2>
|
52 | <div class="beefup__body">My fancy collapsible content.</div>
|
53 | </article>
|
54 | ```
|
55 |
|
56 | 5. Call the plugin
|
57 |
|
58 | ```html
|
59 | <script>
|
60 | $(function() {
|
61 | $('.beefup').beefup();
|
62 | });
|
63 | </script>
|
64 | ```
|
65 |
|
66 | ## Configuration
|
67 |
|
68 | Option | Type | Default | Description
|
69 | --- | --- | --- | ---
|
70 | accessibility | boolean | true | Enable accessibility features like tab control
|
71 | trigger | string | '.beefup__head' | Selector of the trigger element
|
72 | content | string | '.beefup__body' | Selector of the collapsible content
|
73 | openClass | string | 'is-open' | Name of the class which shows if a accordion is triggered or not
|
74 | animation | string | 'slide' | Set animation type to "slide", "fade" or leave empty ""
|
75 | openSpeed | integer | 200 | Set the speed of the open animation
|
76 | closeSpeed | integer | 200 | Set the speed of the close animation
|
77 | scroll | boolean | false | Scroll to accordion on open
|
78 | scrollSpeed | integer | 400 | Set the speed of the scroll animation
|
79 | scrollOffset | integer | 0 | Additional offset to accordion position
|
80 | openSingle | boolean | false | Open just one accordion at once
|
81 | stayOpen | mixed | null | Leave items open, accepts null, integer (index) or string (selector, "first" or "last")
|
82 | selfBlock | boolean | false | Block close event on click
|
83 | selfClose | boolean | false | Close accordion on click outside
|
84 | hash | boolean | true | Open accordion with id on hash change
|
85 | breakpoints | array | null | Array of objects, see [example](https://schascha.github.io/BeefUp/#breakpoints)
|
86 | onInit | function | null | Callback: Fires after the accordions initially setup
|
87 | onOpen | function | null | Callback: Fires after the accordions initially setup
|
88 | onClose | function | null | Callback: Fires after the accordions initially setup
|
89 | onScroll | function | null | Callback: Fires after the accordions initially setup
|
90 |
|
91 | ## Advanced
|
92 |
|
93 | ### API Methods
|
94 |
|
95 | ```javascript
|
96 | var $beefup = $('.beefup').beefup();
|
97 | ```
|
98 |
|
99 | #### Open
|
100 |
|
101 | ```javascript
|
102 | $beefup.open($('#beefupID'));
|
103 | ```
|
104 |
|
105 | #### Close
|
106 |
|
107 | ```javascript
|
108 | $beefup.close($('#beefupID'));
|
109 | ```
|
110 |
|
111 | #### Click
|
112 |
|
113 | ```javascript
|
114 | $beefup.click($('#beefupID'));
|
115 | ```
|
116 |
|
117 | #### Scroll
|
118 |
|
119 | ```javascript
|
120 | $beefup.scroll($('#beefupID'));
|
121 | ```
|
122 |
|
123 | ### Callbacks
|
124 |
|
125 | ```javascript
|
126 | $('.beefup').beefup({
|
127 | onInit: function ($this) {
|
128 | // Do something after initially setup
|
129 | },
|
130 | onOpen: function ($this) {
|
131 | // Do something after accordion open the content
|
132 | },
|
133 | onClose: function ($this) {
|
134 | // Do something after accordion close the content
|
135 | },
|
136 | onScroll: function ($this) {
|
137 | // Do something after scroll animation
|
138 | }
|
139 | });
|
140 | ```
|
141 |
|
142 | ### HTML5 data attributes
|
143 |
|
144 | ```html
|
145 | <article class="beefup" data-beefup-options='{"animation": "", "openSpeed": 800}'>
|
146 | ...
|
147 | </article>
|
148 | ```
|
149 |
|
150 | ## Bugs? 🐛
|
151 |
|
152 | Please let me know: https://github.com/Schascha/BeefUp/issues
|
153 |
|
154 | ## Buy me a Coffee ☕
|
155 |
|
156 | Support this project and [others](https://github.com/Schascha?tab=repositories) via [PayPal](https://www.paypal.me/LosZahlos). Thanks
|
157 |
|
158 | ## Changelog
|
159 |
|
160 | Detailed changes for each release are documented in the [release notes](https://github.com/Schascha/BeefUp/releases).
|
161 |
|
162 | ## License
|
163 |
|
164 | [MIT](./LICENSE)
|
165 |
|
166 | Copyright (c) 2014-present Sascha Künstler
|