Tabs feature with GenerateBlocks

tabs.css

.site .triggers > .gb-inside-container .gb-container {
    color: var(--contrast-2);
    background-color: var(--base-2);
}

.site .triggers > .gb-inside-container .gb-container:hover,
.site .triggers > .gb-inside-container .gb-container:focus,
.site .triggers > .gb-inside-container .gb-container.is-active {
  color: var(--base);
  background-color: var(--accent);
  cursor: pointer;
}

.site .containers > .gb-inside-container .gb-container {
  display: none;
}

.containers > .gb-inside-container .gb-container.is-active {
  display: block;
}

tabs.js

window.addEventListener("DOMContentLoaded", (event) => {
  // grab dom elements
  const tabWrapper = document.querySelector(".triggers");
  const tabList = document.querySelector(".triggers > .gb-inside-container");
  const containerWrapper = document.querySelector(".containers");
  const tabButtons = tabWrapper.querySelectorAll(".triggers > .gb-inside-container .gb-container ");
  const tabContents = containerWrapper.querySelectorAll(".containers > .gb-inside-container .gb-container");

  
  // handle aria atts
  tabList.setAttribute("role", 'tablist' );
  tabContents.forEach((element) => element.setAttribute("role", 'tabpanel'));
  tabButtons.forEach((element) => element.setAttribute("aria-pressed", false));
  tabButtons.forEach((element) => element.setAttribute("role", 'tab' ));
  tabButtons.forEach((element) => element.setAttribute("tabindex", 0 ));
  
  // if already active make non active on click
  function clearActive(element) {
    let ifActive = Array.from(document.querySelectorAll(".is-active"));
    ifActive.forEach((element) => element.classList.remove("is-active"));
  }

  // make each active based on order of appearance
  for (let i = 0; i < tabButtons.length; i++) {
    // I assume you want the first tab and first tab content to be visible inirially
    // if not remove the following two lines and and add is-active class to the elements you want to be open first
    tabButtons[0].classList.add("is-active");
    tabButtons[0].setAttribute("aria-pressed", true);
    tabContents[0].classList.add("is-active");

    // mouse
    tabButtons[i].addEventListener("click", (event) => {
      event.preventDefault(); // if you are using links or buttons, this deals with that
      clearActive();
      tabButtons[i].classList.add("is-active");
      tabButtons[i].setAttribute("aria-pressed", true);
      tabContents[i].classList.add("is-active");
    });

    // keyboard
    tabButtons[i].addEventListener("keyup", (event) => {
      event.preventDefault(); // if you are using links or buttons, this deals with that
      clearActive();
      tabButtons[i].classList.add("is-active");
      tabButtons[i].setAttribute("aria-pressed", true);
      tabContents[i].classList.add("is-active");
    });
  }
});