Skip to content
document.addEventListener("DOMContentLoaded", function () {
const tabWidget = document.querySelector(".scrollable-tabs");
if (!tabWidget) return;
const tabHeader = tabWidget.querySelector(".e-n-tabs-heading");
if (!tabHeader) return;
// Make tab headers scrollable
tabHeader.style.overflowX = "auto";
tabHeader.style.whiteSpace = "nowrap";
tabHeader.style.scrollBehavior = "smooth";
// Create nav buttons
const leftBtn = document.createElement("button");
leftBtn.innerHTML = "◀"; // ◀
leftBtn.className = "tab-scroll-left scroll-arrow";
const rightBtn = document.createElement("button");
rightBtn.innerHTML = "▶"; // ▶
rightBtn.className = "tab-scroll-right scroll-arrow";
// Wrap buttons and tabHeader in a flex container
const wrapper = document.createElement("div");
wrapper.className = "tab-header-scroll-wrapper";
tabWidget.insertBefore(wrapper, tabHeader);
wrapper.appendChild(leftBtn);
wrapper.appendChild(tabHeader);
wrapper.appendChild(rightBtn);
// Scroll functionality
leftBtn.addEventListener("click", () => {
tabHeader.scrollBy({ left: -150, behavior: "smooth" });
});
rightBtn.addEventListener("click", () => {
tabHeader.scrollBy({ left: 150, behavior: "smooth" });
});
});
