I have a frontend form using acf_form(); that is divided into several tabs. I’m looking for a way to programmatically change tabs using JS/jQuery, but there doesn’t seem to be any tabs API for me to work with.
Ideally, I’m looking to add a previous/next tab button on my form, as it’s quite long. I’d need to identify the current active tab, then assign the previous/next tabs.
I’ve checked the JS API (https://www.advancedcustomfields.com/resources/javascript-api/#acf.field-show) but there’s nothing here to manipulate the tabs (I’ve tried show/hide/focus)
Any ideas?
The only way I know of to programmatically switch tabs you are going to have to find the tab element and trigger a click on the tab link “a” element.
To find the current tab
$('.acf-tab-wrap li.active')
how you would identify the previous/next tab I’m not really sure about.
I would possibly construct some type of javascript array or object containing a list of all of the tabs on page load and then use that array/object to somehow figure out what the next/previous tab is when the link/button is clicked.
I might also do something like set an ID (in javascript) or another data attribute on each “a” element in the list and then get the value of the “active” item and determine the next/previous using this when clicked, for example add ‘data-order=”1″‘ // 2, 3, etc.
