schascha / beefup Goto Github PK

View Code? Open in Web Editor NEW

43.0 4.0 7.0 2.62 MB

Just a jQuery accordion plugin

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

License: MIT License

JavaScript 46.70% HTML 34.61% SCSS 18.69%

jquery accordion css javascript plugin collapsible

beefup's Introduction

BeefUp

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

Include jQuery

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

Include plugin

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

Add styles

<link rel="stylesheet" href="dist/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

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

beefup's People

Contributors

Stargazers

Watchers

Forkers

smebberson vonfeist erunda116 dmitrybochkov poltavchenko stylewp neurodance

beefup's Issues

openSingle for child accordions not working.

Stop toggle of open item

Hi there, is there a way to stop the toggling of an open item? stayOpen doesn't seem to work?

i.e. if this is open:

...and you click it, it remains open.

If you click another it closes this and opens the other.

Thanks in advance.
Al

BeefUp 1.2.0 animation is choppy + Question

Just wanted to let you know that the latest version has a very "choppy" animation when opening an accordion panel. I tried 1.1.7 instead and it works smoothly.

Also, I would like to have a "next" button inside each panel, when I click on it, it opens the next panel. Would you be able to help out because applying is-open dynamically doesn't do the trick haha

Great plugin BTW!

$beefup.open method doesn't scroll to accordion panel or am i missing a config

Amazing plugin you've got here @Schascha thank you.
I tried opening a panel based on an active ID, it works but it won't scroll to the open accordion.

if(activeSlug.length > 0) {
    $beefup.open($('#' + activeSlug));
}

Open through API and 'openSingle: true'

Nice plugin!

I have three accordion and three buttons. i want to open each accordion on respective button clicked. Also i set the openSingle option true. So when i am clicking buttons, previously opened accordion stays open so there are multiple accordion opens at a time. Is there any solution for that?

Also is there any option for expand all & collapse all?

Thanks.

stayOpen can't select the first item

Hi,

When I set stayOpen: 0, it doesn't select the first item and when I set stayOpen: 1 it selects the second item. How can I select the first item of the accordion?

Thanks,

Option to change the position of caret icon.

Hi Schascha,

Is there any option to change the position of caret icon? For example: align-to-left?
And how can I style the caret?

Uncaught TypeError

Hi,

I tried out your plugin on my latest BigCommerce build. I'm continually getting a Type Error when browsing over the browser devtools.

Uncaught TypeError: $(...).beefup is not a function

Anyone else seen this?

Hash url

How can I implement beefup accodian using hash value from url

No default jsDelivr CDN file set

This package doesn't have a default file set. You can set it via jsdelivr, browser, or main field in package.json

Accordion item should always stay open

Hi, I found your plugin and I liked it very much. Because it just worked out of the box. Now I have a feature request, that one item should always stay open. I.e. the first item. I think this is very usefull when you have a login/register form where the user can decide wether he has already an account or he should register. Or if you have a faq section and want to show how an answer should look like.

Start open

I don't think this behavior was mentioned before, sorry if it has.

When using openSingle, I would like to have one of the items start open.

Difference to stayOpen behaviour would be the selected item wouldnt stay open when clicked on other items.

Example (Except in BeefUp, you can close them all if you wanted.):
https://jqueryui.com/accordion/#default

Thanks for the awesome plugin, I will be grateful if you can consider this feature request.

What is the license of this plugin?

Hello, this plugin is wonderful and I like it very much, but I can not find any information about the license of this plugin. What is the license of this plugin?