Abstract tabs handle

tabs.ts

const tabsGroup = document.querySelectorAll(".js-tabs")


tabsGroup.forEach(tabGroup => {
  const tabItems = tabGroup.querySelectorAll(".js-tabs__tab-item")
  const panels = tabGroup.querySelectorAll(".js-tabs__panel")

  const closeAllPanels = () => panels.forEach(content => content.classList.remove("--active"))
  const resetAllTabItems = () => tabItems.forEach(link => link.classList.remove("--active"))

  tabItems.forEach(tabItem => {
    tabItem.addEventListener("click", (event) => {
      event.preventDefault()

      if (tabItem.classList.contains("--active")) return

      const targetId = tabItem.getAttribute("data-tab-target") ?? ""
      const targetPanel = tabGroup.querySelector(`[data-panel-id="${targetId}"]`)

      if (targetPanel === null) return

      closeAllPanels()
      resetAllTabItems()
      targetPanel.classList.add("--active")
      tabItem.classList.add("--active")

    })
  })
})

<div class="js-tabs">

  <div>
    <div class="js-tabs__tab-item --active" data-tab-target="panel-1">One</div>
    <div class="js-tabs__tab-item" data-tab-target="panel-2">Two</div>
    <div class="js-tabs__tab-item" data-tab-target="panel-3">Three</div>
  </div>

  <div>
    <div class="js-tabs__panel --active" data-panel-id="panel-1">my content</div>
    <div class="js-tabs__panel" data-panel-id="panel-2">my content 2</div>
    <div class="js-tabs__panel" data-panel-id="panel-3">my content 3</div>
  </div>

</div>