Tabs Previous and Next Buttons

• Samjco

• July 11, 2025 at 4:15 pm

Done!
You can add this JS using WPCode, Woody Code plugins or manually add it in.
This also works if you show ACF on the frontend of a page or post.

//Add the body end in <script> tags
document.addEventListener("DOMContentLoaded", function() {
    const tabGroup = document.querySelector('ul.acf-tab-group');
    const tabs = document.querySelectorAll('ul.acf-tab-group li a.acf-tab-button');
    const submitButtonDiv = document.querySelector('.acf-form-submit');
    const submitButton = submitButtonDiv.querySelector('input[type="submit"]');
    const nextButton = document.createElement('button');
    nextButton.id = 'next-button';
    nextButton.innerText = 'Next';
    nextButton.type = 'button'; // Set the button type to prevent form submission
    const prevButton = document.createElement('button');
    prevButton.id = 'prev-button';
    prevButton.innerText = 'Prev';
    prevButton.type = 'button'; // Set the button type to prevent form submission;

    let currentTab = 0;

    // A. Count the amount of tabs
    const totalTabs = tabs.length;

    // Hide Submit button initially
    if (submitButton) {
        submitButton.style.display = 'none';
    }

    // Show Next, Prev buttons based on data-order attribute
    function showHideButtons() {
        prevButton.style.display = currentTab > 0 ? 'block' : 'none';
        nextButton.style.display = currentTab < totalTabs - 1 ? 'block' : 'none';
        submitButton.style.display = currentTab === totalTabs - 1 ? 'block' : 'none';
    }

    // Trigger tab click based on data-order
    function triggerTabClick(order) {
        let tabToClick = document.querySelector(<code>a.acf-tab-button[data-order="${order}"]
);
        if (tabToClick) {
            tabToClick.click();
        }
    }

    // Handle Next button click
    nextButton.addEventListener('click', function() {
        currentTab = Math.min(currentTab + 1, totalTabs - 1);
        triggerTabClick(currentTab);
        showHideButtons();
    });

    // Handle Prev button click
    prevButton.addEventListener('click', function() {
        currentTab = Math.max(currentTab - 1, 0);
        triggerTabClick(currentTab);
        showHideButtons();
    });

    // Add data-order attribute to each tab
    tabs.forEach((tab, index) => {
        tab.setAttribute('data-order', index);
        tab.addEventListener('click', function(event) {
            event.preventDefault();
            tabs.forEach(t => t.classList.remove('active'));
            tab.classList.add('active');
            currentTab = index;
            showHideButtons();
        });
    });

    // Initial setup
    showHideButtons();

    // Apply inline style to the submitButtonDiv
    submitButtonDiv.style.display = 'flex';
    submitButtonDiv.style.justifyContent = 'space-between';

    // Prepend the buttons before the Submit button in the div.acf-form-submit
    submitButtonDiv.insertBefore(prevButton, submitButton);
    submitButtonDiv.insertBefore(nextButton, submitButton);
});

Steps to make:

I started by identifying the container for ACF tabs and the individual tab elements within it. Next, I fetch the submit button div on the page and hide its default submit button to create 2 custom navigation buttons, “Next” and “Prev,” which are dynamically generated for users to navigate between tabs.

I’ve assigned each tab a numerical order using a created data-order attribute. This allows me to show or hide the buttons based on the current tab position to prevent navigation beyond its limits. Clicking the “Next” button increases the current tab by one, while clicking the “Prev” button decreases it, both updating the displayed tab accordingly.

Clicking directly on a tab does not disrupt the function and remains available for use. Finally, I styled the div containing the custom buttons inline to use flexbox with justify-content: space-between, ensuring the buttons are properly aligned. Cheers!