Vanilla JS tabs

vanilla-js-tabs.liquid

<nav class="drawer-tabs--nav tabsNav" data-control=".mobileMenu">
  {%- assign indexNav = 0 -%}
  {%- for block in section.blocks -%}
    {%- if block.type == 'menu-tab' -%}
      {%- assign name = block.settings.name -%}
      {%- assign name_handle = name | handleize -%}
      <a href="#{{ name_handle }}" class="navv-tab tabsNavLink{% if indexNav == 0 %} is-active{% endif %}">
        {{ name }}
      </a>
      {%- assign indexNav = indexNav | plus: 1 -%}
    {%- endif -%}
  {%- endfor -%}
</nav>

<div class="drawer-tabs--tabs mobileMenu">
  {%- assign indexTab = 0 -%}
  {%- for block in section.blocks -%}
    {%- if block.type == 'menu-tab' -%}
      {%- assign name = block.settings.name -%}
      {%- assign name_handle = name | handleize -%}
      <div class="drawer-tab tabsNavTab{% if indexTab == 0 %} is-open{% endif %}" id="{{ name_handle }}">
        {% comment %} Inner content here {% endcomment %}
      </div>
      {%- assign indexTab = indexTab | plus: 1 -%}
    {%- endif -%}
  {%- endfor -%}
</div>

<script>  
  var tabsNav = document.querySelectorAll('.tabsNav');
  tabsNav.forEach(function(el) {
    let attrLinked = el.dataset.control;
    let tabsNavLinks = el.querySelectorAll('.tabsNavLink');
    tabsNavLinks.forEach(function(el) {
      el.addEventListener('click', function(e) {
        let href = el.getAttribute('href');
        let controledTabs = document.querySelectorAll(attrLinked + ' .tabsNavTab');
        let tabToOpen = document.querySelector(attrLinked + ' .tabsNavTab' + href);
        e.preventDefault();
        tabsNavLinks.forEach(function(lnk) {
          lnk.classList.remove('is-active');
        });
        controledTabs.forEach(function(tab) {
          tab.classList.remove('is-open');
        });
        el.classList.add('is-active');
        tabToOpen.classList.add('is-open');
      })
    });
  });
</script>