Simple jQuery Accordion Plugin – BeefUp

Accordions
Lightweight jQuery Accordion Plugin To Show and Hide Elements - BeefUp
File Size: 3.41 KB
Views Total: 1332 views
Last Update:May 19, 2023
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.13
  • 1.4.12
  • 1.4.11
  • 1.4.10
  • 1.4.9
  • 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

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.

You Might Also Like