Tabbed interface with Stimulus.js

index.html.slim

div data-controller='tabs' data-tabs-index='1'
  .tabs.is-boxed.is-marginless
    ul
      li data-target='tabs.tab'
        a data={action: "tabs#change"} Tab 1
      li data-target='tabs.tab'
        a data={action: "tabs#change"} Tab 2

  .tab.box data={target: 'tabs.tabPanel'} Tab panel 1
  .tab.box data={target: 'tabs.tabPanel'} Tab panel 2

tabs_controller.js

import { Controller } from "stimulus"

export default class extends Controller {

  static targets = [ "tab", "tabPanel" ]

  initialize() {
    this.showTab()
  }

  change(e){
    this.index = this.tabTargets.indexOf(e.target.parentNode)
    this.showTab(this.index)
  }

  showTab() {
    this.tabPanelTargets.forEach((el, i) => {
      if(i==this.index){
        el.classList.remove('is-hidden')
      } else {
        el.classList.add('is-hidden')
      }
    })

    this.tabTargets.forEach((el, i) => {
      if(i==this.index){
        el.classList.add('is-active')
      } else {
        el.classList.remove('is-active')
      }
    })
  }

  get index() {
    return parseInt(this.data.get('index'))
  }

  set index(value) {
    this.data.set("index", value)
    this.showTab()
  }

}