https://cdn.urlr.me/assets/controllers/tabs_controller-MqsYRrS.js

1import { Controller } from "@hotwired/stimulus";
2
3export default class extends Controller {
4    async connect() {
5      const tabs = this.element.querySelector('.tabs');
6
7      tabs.querySelectorAll('.tabs-links li').forEach((selectedTabLink) => {
8          selectedTabLink.addEventListener('click', function () {
9              const tabLinks = selectedTabLink.parentElement;
10              const tabs = tabLinks.closest('.tabs');
11              const tabId = selectedTabLink.dataset.tab;
12
13              // Select the good tab link and deselect the other
14              tabLinks.querySelector('.active').classList.remove('active');
15              selectedTabLink.classList.add('active');
16
17              // Show the good tab and hide the other
18              tabs.querySelector('.tab.active').classList.remove('active');
19              tabs.querySelector(tabId).classList.add('active');
20          });
21      });
22    }
23}