document.addEventListener("DOMContentLoaded", function () { const DURATION = 5000; //in milliseconds const TAB_CLASS = "tab"; // change to your tab class const ACTIVE_CLASS = "w--current"; // Webflow active tab class let autoRotation; const startRotation = () => { autoRotation = setInterval(activateNextTab, DURATION); }; const stopRotation = () => { clearTimeout(autoRotation); }; const activateNextTab = () => { let currentTab = document.getElementsByClassName( TAB_CLASS + " " + ACTIVE_CLASS )[0]; let nextTab = currentTab.nextElementSibling ? currentTab.nextElementSibling : currentTab.parentElement.firstElementChild; if (nextTab) { currentTab.classList.remove(ACTIVE_CLASS); nextTab.classList.add(ACTIVE_CLASS); } }; const TAB_CONTENT = document.getElementsByClassName("w-tab-content")[0]; TAB_CONTENT.addEventListener("mouseover", stopRotation); TAB_CONTENT.addEventListener("mouseleave", startRotation); const resumeRotation = () => { startRotation(); this.removeEventListener("mouseleave", resumeRotation); }; const pauseRotation = () => { stopRotation(); this.addEventListener("mouseleave", resumeRotation); }; [...document.getElementsByClassName(TAB_CLASS)].forEach(function (element) { element.addEventListener("click", pauseRotation); }); startRotation(); });