JQuery Accordion Menu Generator

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'));