BeefUp

Just a jQuery accordion plugin

https://schascha.github.io/BeefUp/

Examples:

• Toggle buttons
• Hashchange
• CSS animations
• Self block

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

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

MIT

Copyright (c) 2014-present Sascha Künstler