Tablist

				
					
// Wait for the DOM content to be fully loaded before executing the code
document.addEventListener("DOMContentLoaded", function () {
  // Select all elements with role="tab" and role="tabpanel"
  const tabs = document.querySelectorAll('[role="tab"]');
  const panels = document.querySelectorAll('[role="tabpanel"]');

  // Show the first tab and panel by default
  tabs[0].setAttribute("aria-selected", "true"); // Activate the first tab
  tabs[0].setAttribute("tabindex", "0"); // Set tabindex for focus
  panels[0].removeAttribute("hidden"); // Show the first panel

  // Add event listeners to each tab for click and keyboard interactions
  tabs.forEach((tab) => {
    tab.addEventListener("click", () => {
      activateTab(tab); // Call the activateTab function on click
    });

    tab.addEventListener("keydown", (e) => {
      if (e.key === "Enter" || e.key === " ") {
        e.preventDefault();
        activateTab(tab); // Call the activateTab function on Enter or Space key press
      }
    });
  });

  // Function to activate a tab and associated panel
  function activateTab(currentTab) {
    const tabID = currentTab.getAttribute("id");

    // Deactivate all tabs and hide all panels
    tabs.forEach((t) => {
      t.setAttribute("aria-selected", "false");
    });

    panels.forEach((panel) => {
      panel.setAttribute("aria-hidden", "true");
    });

    // Activate the selected tab and show its associated panel
    currentTab.setAttribute("aria-selected", "true");
    currentTab.setAttribute("tabindex", "0");

    const panel = document.getElementById(
      currentTab.getAttribute("aria-controls")
    );
    panel.setAttribute("aria-hidden", "false");

    currentTab.focus(); // Set focus to the activated tab
  }
});

// Another event listener for when the DOM content is loaded
document.addEventListener("DOMContentLoaded", function () {
  const tabs = document.querySelectorAll('[role="tab"]');

  // Add click event listeners to each tab for animation (not recommended)
  tabs.forEach((tab) => {
    tab.addEventListener("onclick", () => {
      const currentTab = document.querySelector('[aria-selected="true"]');
      const newTab = tab;

      // Create a div for the animation
      const animation = document.createElement("div");
      animation.classList.add("tab-animation");
      animation.style.backgroundColor = getComputedStyle(
        currentTab
      ).backgroundColor;

      currentTab.appendChild(animation); // Append animation to the current tab

      const rect = newTab.getBoundingClientRect();
      const offset = rect.left - currentTab.getBoundingClientRect().left;

      animation.style.transform = `translateX(${offset}px)`; // Apply animation

      // Perform animation transitions and tab switching
      setTimeout(() => {
        currentTab.removeChild(animation);
        newTab.appendChild(animation);
        animation.style.transform = `translateX(0)`;

        setTimeout(() => {
          newTab.removeChild(animation);
          newTab.setAttribute("aria-selected", "true"); // Activate new tab
          newTab.focus(); // Set focus to the new tab
          currentTab.removeAttribute("aria-selected"); // Deactivate current tab
        }, 300);
      }, 300);
    });
  });
});