JQuery Tabs Generator

class JsTabs {
    constructor(tabs_id, animation_class_list = []) {
        this.tabs = tabs_id;
        this.animationClasses = animation_class_list;
        this.menu = this.tabs.querySelectorAll(".tabs-menu");
        for (let i = 0; i < this.menu.length; i++) {
            this.menu[i].onclick = this.showTab.bind(this);
        }
    }
    showTab(event) {
        // prevent active tab
        if (event.target.classList.contains('tabs-menu-active')) {
            return;
        }
        var tabs_panel = this.tabs.querySelectorAll(".tabs-panel");
      
        // hide all tabs panel and remove animation classes
        for (let k = 0; k < tabs_panel.length; k++) {
            tabs_panel[k].style.display = "none";
            tabs_panel[k].classList.remove(...this.animationClasses);
        }
        let target_id = event.target.dataset.target;
        let current_tab = this.tabs.querySelector("#" + target_id);
      
        //show current tab
        current_tab.style.display = "block";
      
        // add animation classes
        current_tab.classList.add(...this.animationClasses);
      
        // remove class active tab menu
        for (let j = 0; j < this.menu.length; j++) {
            this.menu[j].classList.remove("tabs-menu-active");
        }
      
        // add class active menu
        event.target.classList.add("tabs-menu-active");
        event.preventDefault();
    }
}

<div id="tabs-1">

 <div id="tabs-nav">
    <a href="#" data-target="tab_1" class="tabs-menu tabs-menu-active">Tab 1</a>
    <a href="#" data-target="tab_2" class="tabs-menu">Tab 2</a>
    <a href="#" data-target="tab_3" class="tabs-menu">Tab 3</a>
</div>

<div class="tabs-content">
    <div id="tab_1" class="tabs-panel" style="display:block"> Tab 1 </div>
    <div id="tab_2" class="tabs-panel"> Tab 2 </div>
    <div id="tab_3" class="tabs-panel"> Tab 3 </div>
</div>

</div>

div#hcg_tabs {
  width: 100%;
}
div#tabs-nav {
  position: relative;
  display: flex;
  justify-content: flex-start;
}
div#tabs-nav a:nth-child(even) {
  margin: 0 3px;
}
a.tabs-menu {
  display: inline-block;
  background-color: #1179ac;
  font-size: 12px;
  font-family: Arial,Helvetica,sans-serif;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  text-decoration: none;
  border: solid 2px #1179ac;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}
a.tabs-menu.tabs-menu-active {
  background-color: #fff;
  border: solid 2px #1179ac;
  color: #6b6b6b;
  border-bottom: 0;
}
.tabs-content {
  border: solid 2px #1179ac;
  margin-top: -2px;
  background-color: #fff;
  overflow: hidden;
  line-height: 1.5;
}
.tabs-panel {
  display: none;
  min-height: 150px;
  overflow: auto;
  padding: 10px;
  height: 200px;
  font-size: 14px;
}

/************ CSS Animation ***********/

.animated-tabs {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both; 
  animation-fill-mode: both;
}
@keyframes bounceIn { 
    0% { 
        opacity: 0; 
        transform: scale(.3); 
    } 

    50% { 
        opacity: 1; 
        transform: scale(1.05); 
    } 

    70% { 
        transform: scale(.9); 
    } 

    100% { 
        transform: scale(1); 
    } 
}
.bounceIn { 
    -webkit-animation-name: bounceIn; 
    animation-name: bounceIn; 
}

// usage 
    // 2 Options
    // 1  Tabs id (required) = document.getElementById('tabs-1')
    // 2  animation classes (optional) = array ["animated", "zoomIn"] 

new JsTabs(document.getElementById('tabs-1'), ["animated-tabs", "bounceIn"]);

// new JsTabs(document.getElementById('tabs-2'));