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

}

https://jsfiddle.net/qwvurt0p/2/

Thanks for sharing! This was super helpful! I used it in my own application. The only change is now using the value attribute api for getting/setting the index value

Thanks for your sharing! This is useful to me.
I updated some based on your function so that we could use TabPanl by ID.
https://codepen.io/koolsolutions/pen/XWRJqLe
Thank you! :)