Simple jQuery Accordion Plugin – BeefUp

Accordions
File Size: 3.41 KB
Views Total: 780 views
Last Update:July 06, 2022
Publish Date: July 05, 2014
Official Website: Go to website
License: MIT
Plugin Author: Schascha
Demo    Download

A Responsive & Simple jQuery Accordion Plugin To Show and Hide Elements in Webpage. light weight code easy to use & easy to customize. A toggle of the visibility of Html elements.

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.

How to use :

Include the file of jQuery library and beefup jQuery plugin.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="jquery.beefup.js"></script>
<link rel="stylesheet" href="dist/css/jquery.beefup.css">

Create a simple accordion with plain Html structure.

<article class="demo">
  <h2 class="beefup-head"><a href="https://www.jquerypost.com/tag/accordions/">Accordion</a> Header</h2>
  <div class="beefup-body">
    <p>Accordion Body</p>
  </div>
</article>

Call the plugin with default options.

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

 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;
}

Done

Thanks for make jQuery plugin is developed by Schascha For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :
  • 1.4.8
  • 1.4.7
  • 1.4.6
  • 1.4.5
  • 1.4.4
  • 1.4.3
  • 1.4.2
  • 1.4.1
  • 1.4.0
  • 1.3.2
  • 1.3.1
  • 1.3.0
  • 1.2.5
  • 1.2.4
  • 1.2.3
  • 1.2.2
  • 1.2.1
  • 1.2.0
  • 1.1.9
  • 1.1.8
  • 1.1.7
  • 1.1.6
  • 1.1.5
  • 1.1.4
  • 1.1.3
  • 1.1.2
  • 1.1.1
  • 1.1.0
  • 1.0.2
  • 1.0.1

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.

Related jQuery Plugins

You Might Also Like