【jQuery】アコーディオンjQueryプラグインBeefUp

jQuery

BeefUp

April 5, 2018

BeefUpはアコーディオンjQueryプラグイン。

Usage

Include jQuery

<script src="js/jquery.min.js"></script>

Include plugin

<script src="js/jquery.beefup.min.js"></script>

Add styles

<link rel="stylesheet" href="css/jquery.beefup.css">

Add markup

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

Call the plugin

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

Configuration

trigger: '.beefup__head',   // String: Name of the trigger element
content: '.beefup__body',   // String: Name of the collapsible content
openClass: 'is-open',       // String: Name of the class which shows if a accordion is triggered or not
animation: 'slide',         // String: Set animation type to "slide", "fade" or leave empty ""
openSpeed: 200,             // Integer: Set the speed of the open animation
closeSpeed: 200,            // Integer: Set the speed of the close animation
scroll: false,              // Boolean: Scroll to accordion
scrollSpeed: 400,           // Integer: Set the speed of the scroll feature
scrollOffset: 0,            // Integer: Additional offset to accordion position
openSingle: false,          // Boolean: Open just one accordion at once
stayOpen: null,             // Mixed: Leave one item open, accepts null, integer or string
selfClose: false,           // Boolean: Close on click outside
hash: true,                 // Boolean: Open accordion with id on hash change
breakpoints: null,          // Mixed: Null or array of objects
onInit: function() {},      // Callback: Fires after the accordions initially setup
onOpen: function() {},      // Callback: Fires after accordion opens content
onClose: function() {},     // Callback: Fires after accordion close content
onScroll: function() {}     // Callback: Fires after scroll animation

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>

Latest Posts

Related Posts