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.
• 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="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/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. Options and defaults.

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

Change log:

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.