This component allows to you add accessible tabs populated by either ACF repeater fields or Meta Box cloneable Group fields. The tabs can be set to automatically layout as an accordion on mobile.
Add the field names in the text fields provided inside of the ‘Dynamic Data’ tab.
For use with ACF Repeaters, you’ll need..
For use with Meta Box, you’ll need..
In both cases, the data source can be changed to either pick up the data from the current page, a particular post ID or from a settings/options page.
Adjust Height of Panels
'auto'— Do nothing.
'equal'— Adjust the height of all tab contents evenly to the highest.
'adaptive'— Update height of tabs contents to fit currently active panels.
Transition Effect – Choose an effect for the tab content when each tab is selected.
Start Index – Select the tab you want to be open when the page first loads.
Browser History – Choose the behavior of History API updating hash in URL.
'replace'— Update the hash.
'push'— Update the hash, and allows you to go back and forth using browser buttons. It will work in browsers with History API enabled.
false— Do not update the hash.
Keyboard Navigation –
Navigate back and forth with a specific set of keys.
'select'— Move to the focused tab.
'focus'— Move focus to the target tab, and move after either Enter or Space key is pressed.
false— Do not respond to keyboard inputs.
Hash suffix – By default the hash that appears in the browser address bar while navigating the tabs will include the tab element’s ID followed by the index of the selected tab. So you can change the ID of the element if you want it to be something more human-readable. On top of this, you can also add a suffix to this from this setting here.
Autoplay – Automatically advances to the next tab after X milliseconds. Both ‘pause on hover’ and ‘pause on focus’ options are available.
There are currently two options for mobile layout. Sticking with tabs or turning the tabs into an accordion.
Icon – Choose to replace the default arrow icon that will appear in the mobile accordion layout only.
Breakpoint to switch to accordion layout – Choose the exact px width at which you want the tabs to turn into the accordion, all the styles you’ve added to the tabs will be inherited by the accordion automatically.
All the style controls for the entire element can be found in the styling tab.