BeefUp - Just a jQuery accordion plugin


Keywords
accordion, jquery, css, javascript, plugin, collapsible
License
MIT
Install
npm install beefup@1.4.8

Documentation

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

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