Dynamic Tabs

This component allows to you add accessible tabs populated by ACF repeater fields or cloneable Metabox 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 ACF repeater 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

Currently, this component is set to be used with ACF repeater fields or Metabox Group fields (that are set to be cloneable).

For ACF, add in the name of the repeater field, and then the names of the subfields for both the tabs and the tabs content is needed.

For Metabox, add in the ID of the cloneable group field, and then the IDs of the fields for both of the tabs and the tabs content.

As with the Pro Accordion, these fields can be text, textarea or WYSIWYG editor depending on what type of content you’re expecting to be added.

Control Options

Ajust 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.

Autoplay – Automatically advances to the next tab after X milliseconds. Both ‘pause on hover’ and ‘pause on focus’ options are available.

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.

Note – the hash links can be changed by changing the ID on the dynamic tabs component itself. The “-content” that appears at the end of hashlink will be customisable from inside the settings in a future update.

Keyboard Controls –

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.

Styling the Tabs

Horizontal alignment – Align the tabs within the tab group container. (To allow the tabs to fill all the available space, set the tab width to 100%.

The rest of the styling options for both the tabs and the tab content are self explanatory.

Mobile

There are currently two options for mobile layout. Sticking with tabs or turning the tabs into an accordion. Choose the breakpoint 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.

There’s also an option to include an icon

FAQ

Possible to have vertical tabs on desktops?

Yes.

At Dynamic Tabs > Style tabs set Tab width to 100%.

Then add this sample CSS at Manage > Stylesheets and change the breakpoint as needed:

@media (min-width: 992px) {
	.oxy-dynamic-tabs_inner {
		display: flex;
	}

	.oxy-dynamic-tabs_tab-group {
		flex-wrap: wrap;
		flex: 0.25;
	}

	.oxy-dynamic-tabs_panel-group {
		flex: 0.75;
	}

	.oxy-dynamic-tabs_panel .oxy-dynamic-tabs_panel-inner {
		padding-top: 0;
		padding-bottom: 0;
	}

	.oxy-dynamic-tabs_panel-inner p:first-child {
		margin-top: 0;
	}
}

Before:

After: