openfoodnetwork/app/webpacker/controllers/tabs_controller.js

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ["tab", "content"];

  select(event) {
    this.setCurrentTab(this.tabTargets.indexOf(event.currentTarget));
  }

  // private

  connect() {
    this.setCurrentTab();
  }

  setCurrentTab(tabIndex = 0) {
    this.showSelectedContent(tabIndex);
    this.setButtonActiveClass(tabIndex);
  }

  showSelectedContent(tabIndex) {
    this.contentTargets.forEach((element, index) => {
      element.hidden = index !== tabIndex;
    });
  }

  setButtonActiveClass(tabIndex) {
    this.tabTargets.forEach((element, index) => {
      if (index === tabIndex) {
        element.classList.add("active");
      } else {
        element.classList.remove("active");
      }
    });
  }
}