function activateSelfDeactivateSibs(button) {
  if (button.classList.contains("active")) return;
  
  Array.from(button.parentNode.children).forEach(s => {
    if (s === button){
      button.classList.add('active');
    } else {
      s.classList.remove('active');
    }
    const targetId = s.dataset.targetId;
    const target = document.getElementById(targetId);
    
    if (!target) return;
    
    if (s.classList.contains('active')) {
      target.classList.add('active');
      target.dispatchEvent(new CustomEvent("tab-activated", {bubbles: false}))
    } else {
      target.classList.remove('active');
    }
  });
}

document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".tab-button").forEach(button => {
    button.addEventListener("click", () => {
      activateSelfDeactivateSibs(button);
    });
  });
});