Lightweight jQuery Accordion Plugin To Show and Hide Elements - BeefUp

File Size: 223 KB
Views Total: 14262
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Lightweight jQuery Accordion Plugin To Show and Hide Elements - BeefUp

BeefUp is a lightweight, responsive jQuery accordion plugin which allows you to toggle the visibility of Html elements with following features:

Features:

  • Multiple accordions on one page.
  • Accessible.
  • Toggle Html elements via JS or CSS.
  • Multi-level accordions with nested Html elements.
  • Fade or slide animations.
  • Callback support.

Basic Usage:

1. Include the latest version of jQuery library and the jQuery beefup plugin at the bottom of the document.

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

2. Create a simple accordion with plain Html structure.

<article class="demo">
  <h2 class="beefup-head">Accordion Header</h2>
  <div class="beefup-body">
    <p>Accordion Body</p>
  </div>
</article>

3. Call the plugin with default options.

$('.demo').beefup();

4. Style the accordion whatever you want.

.beefup-head {
  cursor: pointer;
  position: relative;
}

.beefup-head:after {
  border-style: solid;
  border-width: 12px 12px 0 12px;
  border-color: #ddd transparent transparent transparent;
  content: '';
  position: absolute;
  right: 0;
  height: 0;
  margin-top: -6px;
  top: 50%;
  width: 0;
}

.open > .beefup-head:after {
  border-width: 0 12px 12px 12px;
  border-color: transparent transparent #ddd transparent;
}

5. Available options and defaults.

$('.demo').beefup({

  // Boolean: Enable accessibility features like tab control
  accessibility: true,

  // String: Name of the trigger element
  trigger: '.beefup__head',   

  // String: Name of the collapsible content
  content: '.beefup__body',   

  // String: Name of the class which shows if a accordion is triggered or not
  openClass: 'is-open',       

  // String: Set animation type to "slide", "fade" or leave empty ""
  animation: 'slide',         

  // Integer: Set the speed of the open animation
  openSpeed: 200,             

  // Integer: Set the speed of the close animation
  closeSpeed: 200,      

  // Boolean: Scroll to accordion
  scroll: false,        

  // Integer: Set the speed of the scroll feature
  scrollSpeed: 400,     

  // Integer: Additional offset to accordion position
  scrollOffset: 0,      

  // Boolean: Open just one accordion at once
  openSingle: false,      

  // Mixed: Leave one item open, accepts null, integer or string
  stayOpen: null,             

  // Boolean: Close on click outside
  selfClose: false,   

  // Boolean: Block close event on click        
  selfBlock: false,               

  // Boolean: Open accordion with id on hash change
  hash: true,     

  // Mixed: Null or array of objects       
  breakpoints: null
               
});

6. Callback functions.

$('.demo').beefup({

  onInit: function() {}, 
  onOpen: function() {},
  onClose: function() {},
  onScroll: function() {}

});

Changelog:

v1.4.13 (2024-03-05)

  • Update dependencies

v1.4.13 (2024-01-18)

  • Update

v1.4.12 (2023-11-20)

  • Update

v1.4.11 (2023-10-05)

  • Bump dependencies

v1.4.10 (2023-07-05)

  • Bump dependencies

v1.4.9 (2022-12-12)

  • Use node lts/*
  • Bump dependencies

v1.4.8 (2022-10-11)

  • Updated dependencies

v1.4.7 (2022-07-11)

  • Updated dependencies

v1.4.6 (2022-04-04)

  • Updated dependencies

v1.4.5 (2022-02-14)

  • Migrate to Stylelint v14
  • Bump dependencies

v1.4.4 (2021-12-02)

  • Update dependencies

v1.4.3 (2021-10-30)

  • Update tests
  • Bump dependencies

v1.4.2 (2021-09-23)

  • Bump dependencies

v1.4.1 (2021-09-03)

  • Bump dependencies

v1.4.0 (2021-07-14)

  • Update

v1.3.1 (2021-06-02)

  • Whitelist files in package.json
  • Bump dependencies

v1.3.0 (2021-05-31)

  • Use stylelint
  • Fix Sass slash as division deprecation warning
  • Update Jest and ESLint config
  • Bump dependencies

v1.2.5 (2021-05-14)

  • Update

v1.2.4 (2021-04-08)

  • Dependency updated

v1.2.3 (2021-04-07)

  • Updated

v1.2.2 (2021-04-06)

  • Provide default file in package.json

v1.2.1 (2020-10-07)

  • Provide default file in package.json
  • Remove hidden attribute before animation

2019-11-03

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

v1.2.0 (2019-10-05)

  • Add accessibility option
  • Update button styles
  • Prefix private methods
  • Use jest instead of QUnit

v1.1.9 (2019-09-30)

  • Add 'first' and 'last' selector. 

v1.1.8 (2019-09-28)

  • Fix openSingle option in nested accordions

2018-11-12

  • added hash change support and demo

2018-08-02

  • Fix close method
  • v1.1.7

2018-02-07

  • Fix stayOpen issue & clean up

2016-10-02

  • v1.1.5: Fix style issue

2016-09-28

  • Improve stayOpen functionality.

2014-09-11

  • Add missing return value in click method

2014-07-18

  • Improve the layout and fix some wording/markup issues

2014-07-09

  • update to v1.0.1

 


This awesome jQuery plugin is developed by Schascha. For more Advanced Usages, please check the demo page or visit the official website.