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.
Table of Contents
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.
