JQuery Accordion Menu Generator

JQuery Accordion Generator. JQuery Animation Effect Accordion

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
    position
    icon
    content
    Collapse
    Acive tab
    CSS
    Copy and paste the CSS code in between the head tags of your pages
    HTML
    Copy and paste the HTML code in between the body tags of your pages
    JavaScript
    Copy and paste the javascript code between the body tags of your pages

    Multiple Accordion JavaScript Code With CSS Animation Effect

    class JsAccordion {
        constructor(accordion_id, collapse = false, animation_class_list = []) {
            this.accordion = accordion_id;
            this.collapse = collapse;
            this.animation = 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.toggle_accordion.bind(this);
            }
        }
        toggle_accordion(event) {
            var header = event.target;
            var content_id = header.nextElementSibling;
            if (this.collapse && header.classList.contains("active-accordion")) {
                this.remove_active_head_class();
                content_id.style.display = "none";
                this.remove_animation_classes(content_id);
            } else {
                var tabs_panel = this.accordion.querySelectorAll(".accordion-content");
                for (var k = 0; k < tabs_panel.length; k++) {
                    tabs_panel[k].style.display = "none";
                    this.remove_animation_classes(tabs_panel[k]);
                }
                this.remove_active_head_class();
                header.classList.add("active-accordion");
                this.add_animation_classes(content_id);
                content_id.style.display = "block";
            }
            return false;
        }
        remove_active_head_class() {
            for (var j = 0; j < this.menu_headers.length; j++) {
                this.menu_headers[j].classList.remove("active-accordion");
            }
        }
        remove_animation_classes(tab) {
            for (let i = 0; i < this.animation.length; i++) {
                tab.classList.remove(this.animation[i]);
            }
        }
        add_animation_classes(tab) {
            for (let i = 0; i < this.animation.length; i++) {
                tab.classList.add(this.animation[i]);
            }
        }
    }
    
    <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'));
    
    new JsAccordion(document.getElementById('accordion-2'), true, ["animated","zoomIn"]);
    
    1 Default accordion
    2 Collapse and CSS Animation
    Edit content
    menu name
    content
    hostinger