JQuery Accordion Menu Generator

JQuery Generate online Accordion Tabs. JQuery Animation Effect Accordion, Javascript accordion tabs with CSS animation effect

Demo Accordion:
Demo
1

Add name and content

Menu Name
Content
Insert
2

Accordion menu and content. drag and reorder

    Accordion Function
    jQuery Accordion
    Effect
    icon
    Content
    Collapse
    CSS
    HTML
    JavaScript

    Multiple Accordion JavaScript With CSS Animation Effect

    JavaScript
    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");
            }
        }
    }
    HTML
    <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>
    
    CSS
    .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'));
    
    1 Default accordion
    2 Collapse and CSS Animation
    Edit content
    menu name
    content