JQuery Accordion Menu Generator
JQuery Generate online Accordion Tabs. JQuery Animation Effect Accordion, Javascript accordion tabs with CSS animation effect
Demo Accordion:
Demo
Multiple Accordion JavaScript With CSS Animation Effect
class JsAccordion {
constructor(accordion_id, collapse = false, animation_class_list = []) {
this.accordion = accordion_id;
this.collapse = collapse;
this.animationClassList = animation_class_list;
this.menu_headers = this.accordion.querySelectorAll(".accordion-header");
for (var k = 0; k < this.menu_headers.length; k++) {
this.menu_headers[k].onclick = this.toggleAccordion.bind(this);
}
}
toggleAccordion(event) {
var header = event.target;
var content_id = header.nextElementSibling;
if (this.collapse && header.classList.contains("active-accordion")) {
this.removeActiveHeadClass();
content_id.style.display = "none";
content_id.classList.remove(...this.animationClassList);
} else {
let tabs_panel = this.accordion.querySelectorAll(".accordion-content");
for (let k = 0; k < tabs_panel.length; k++) {
tabs_panel[k].style.display = "none";
tabs_panel[k].classList.remove(...this.animationClassList);
}
this.removeActiveHeadClass();
header.classList.add("active-accordion");
content_id.classList.add(...this.animationClassList);
content_id.style.display = "block";
}
event.preventDefault();
}
removeActiveHeadClass() {
for (let i = 0; i < this.menu_headers.length; i++) {
this.menu_headers[i].classList.remove("active-accordion");
}
}
}
<div id="accordion-1" class="accordion">
<div class="accordion-box">
<a href="#" class="accordion-header active-accordion" data-target="acrd_1">Menu 1</a>
<div class="accordion-content" id="acrd_1" style="display:block"> Tab 1 </div>
</div>
<div class="accordion-box">
<a href="#" class="accordion-header" data-target="acrd_2">Menu 2</a>
<div class="accordion-content" id="acrd_2"> Tab 2 </div>
</div>
<div class="accordion-box">
<a href="#" class="accordion-header" data-target="acrd_3">Menu 3</a>
<div class="accordion-content" id="acrd_3"> Tab 3 </div>
</div>
</div>
.accordion {
font-family: Arial, Helvetica, sans-serif;
width: 500px;
display: inline-block;
position: relative;
max-width: 100%;
}
a.accordion-header {
display: block;
background-color: #585858;
color: #fff;
padding: 10px 5px;
font-size: 14px;
border: solid 1px #585858;
cursor: pointer;
margin-bottom: 2px;
text-decoration: none;
text-align: left;
}
a.accordion-header.active-accordion {
background-color: #1179ac;
border: solid 1px #1179ac;
}
.accordion-content {
display: none;
position: relative;
padding: 10px;
border: solid 1px #aaa;
margin-top: -2px;
border-top: none;
margin-bottom: 2px;
text-align: left;
font-size: 14px;
}
a.accordion-header:after {
content: '\002b';
color: #fff;
font-weight: bold;
float: right;
margin-left: 10px;
font-size: 15px;
}
a.accordion-header.active-accordion:after {
content: '\2212';
}
/************ CSS Animation ***********/
.animated {
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
@keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
40% {
opacity: 1
}
}
//usage
// 3 Options
// 1 accordion_id (required) = document.getElementById('accordion-1')
// 2 collapse (optional) = boolean true | false
// 3 animation classes (optional) = array ["animated", "zoomIn"]
new JsAccordion(document.getElementById('accordion-1'), true, ["animated","zoomIn"]);
// new JsAccordion(document.getElementById('accordion-2'));
Edit content
menu name
content