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.

Key Features

• Accessible by keyboard out of the box
• Dynamically populated with dynamic data from ACF / Meta Box fields.
• Can change into accordion at a set breakpoint.
• Fade / rotate transition effects
• Supports hash linking directly to tab content

Adding Content to the Tabs

Add the field names in the text fields provided inside of the ‘Dynamic Data’ tab.

For use with ACF Repeaters, you’ll need..

• the repeater field name (repeater field)
• the subfield name for the tabs (textfield)
• the subfield name for the tab content (textfield or WYSIWYG)

For use with Meta Box, you’ll need..

• The group ID (must be cloneable)
• The sub field ID for the tabs
• The subfield ID for the tabs content.

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.

Control Options

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.

• ← — Move to the previous tab.
• → — Move to the next tab.
• Home — Move to the first tab.
• End — Move to the last tab.

• '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.

Mobile Accordion

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.

Styling

All the style controls for the entire element can be found in the styling tab.