1.4.14 • Published 1 month ago

beefup v1.4.14

Weekly downloads
309
License
MIT
Repository
github
Last release
1 month ago

BeefUp

Build npm jsDelivr install size

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

  1. Include jQuery

    <script src="dist/js/jquery.min.js"></script>
  2. Include plugin

    <script src="dist/js/jquery.beefup.min.js"></script>
  3. Add styles

    <link rel="stylesheet" href="dist/css/jquery.beefup.css">
  4. Add markup

    <article class="beefup">
        <h2 class="beefup__head">Headline</h2>
        <div class="beefup__body">My fancy collapsible content.</div>
    </article>
  5. Call the plugin

    <script>
        $(function() {
            $('.beefup').beefup();
        });
    </script>

Configuration

OptionTypeDefaultDescription
accessibilitybooleantrueEnable accessibility features like tab control
triggerstring'.beefup__head'Selector of the trigger element
contentstring'.beefup__body'Selector of the collapsible content
openClassstring'is-open'Name of the class which shows if a accordion is triggered or not
animationstring'slide'Set animation type to "slide", "fade" or leave empty ""
openSpeedinteger200Set the speed of the open animation
closeSpeedinteger200Set the speed of the close animation
scrollbooleanfalseScroll to accordion on open
scrollSpeedinteger400Set the speed of the scroll animation
scrollOffsetinteger0Additional offset to accordion position
openSinglebooleanfalseOpen just one accordion at once
stayOpenmixednullLeave items open, accepts null, integer (index) or string (selector, "first" or "last")
selfBlockbooleanfalseBlock close event on click
selfClosebooleanfalseClose accordion on click outside
hashbooleantrueOpen accordion with id on hash change
breakpointsarraynullArray of objects, see example
onInitfunctionnullCallback: Fires after the accordions initially setup
onOpenfunctionnullCallback: Fires after the accordions initially setup
onClosefunctionnullCallback: Fires after the accordions initially setup
onScrollfunctionnullCallback: 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

MIT

Copyright (c) 2014-present Sascha Künstler

1.4.14

1 month ago

1.4.13

3 months ago

1.4.11

7 months ago

1.4.10

10 months ago

1.4.12

5 months ago

1.4.9

1 year ago

1.4.8

2 years ago

1.4.7

2 years ago

1.4.6

2 years ago

1.4.5

2 years ago

1.4.4

2 years ago

1.4.3

2 years ago

1.4.2

3 years ago

1.4.1

3 years ago

1.4.0

3 years ago

1.3.2

3 years ago

1.3.1

3 years ago

1.3.0

3 years ago

1.2.5

3 years ago

1.2.4

3 years ago

1.2.3

3 years ago

1.2.2

3 years ago

1.2.1

4 years ago

1.2.0

5 years ago

1.1.9

5 years ago

1.1.8

5 years ago

1.1.7

6 years ago

1.1.6

6 years ago

1.1.5

8 years ago

1.1.4

8 years ago

1.1.3

8 years ago