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")
      }
    })
  }
}