In this tutorial, I'll show you how to make dynamic tabs in Oxgeyn Builder using ACF without the need for extra WordPress plugins, which will allow you to have full control of the style.

You can find what I will be recreating for Oxygen Builder: Simple Tabs on Codepen

Create a New Group Field in ACF

You will need to create a repeater with the following sub-fields:

  1. Tab Header as a text field
  2. Tab Content as a text area field or your preference, I'll set the text area to automatically add paragraphs

You can also add more sub-fields as required for the tab container, or the tab header for example if you want to use a custom icon there.

You will then need to assign that group field to your custom posts, pages or any other specific location.

adding repeater inside ACF group field with text and text area to use in oxygen builder for dynamic tabs

Add Content to the Repeater inside your Post

Next, you will need to add as many repeaters as you want, and it doesn't matter how repeaters you have as we are going to make it fully responsive.

Adding content to ACF Repeater Field inside post for dynamic data

Create Repeater Inside Oxygen Builder

  1. Inside the Query options tick "Use ACF Repeater"
  2. Select required ACF Repeater Field
  3. Click Apply Query Params
  4. Add new class "tabs"

Make changes to the "tabs" class

  1. Go To Advanced
  2. Click On Layout
    • Display: Flex
    • Overflow: Scroll

Flex will insure we have the horizontal buttons, and overflow will allow scrolling tabs when we are out of space, especially on mobile.

Adding Styles inside Oxygen Builder

Add a new "tab" class and make changes

Add a new "tab" class inside the child element of the repeater, and make changes to tab class:

  • Width: 100%
  • Background Color: #fc7904, or any of your choice
  • Check "Use Custom Tag"
  • Add "button" inside the tag
add chnages to tab class inside oxygen builder repeater

Make typography changes:

  • Color: #ffffff
  • Font Weight: 700
  • Text Transform: uppercase
apply typography changes inside oxygen builder

Add custom CSS for accessibility:

  • cursor: pointer;
Adding cursor pointer css inside code block

Add padding inside size and spacing:

  • Padding top and bottom: 10px
  • Padding left and right: 10px
Padding styles inside oxygen Builder

Add border styles

  • Color: #fc7904
  • Width: 1px
  • Style: Solid
Border Styles inside Oxygen Builder

Add Tab Header with Dynamic Data

  1. Add a new "text" field inside the tab
  2. Click on the text
  3. Click on "Insert Data"
Oxygen Builder Adding text field
On the front end, it will look better...
  1. Click on "Repeater Field"
  2. Select "Tab Header"
  3. Click "Insert"
Adding Dynamic Content Inside Oxygen Builder

Create Another Repeater

  1. Inside the Query options tick "Use ACF Repeater"
  2. Select required ACF Repeater Field
  3. Click Apply Query Params
  4. Add new class "tab-content"
Adding repeater inside Oxygen Builder
The tab content layout looks broken, but on the front end, it's fine.

Add Styles

Add some styles inside Size & Spacing:

  • Padding top and bottom: 10px
  • Padding right and left: 20px
  • Width: 100%
  • Min-height: 300px
adding styles inside tab content element

Add Dynamic Data to Tab Content

Now we are just left to add ACF dynamic data to tab content inside our child div element of the repeater field

  1. Add Text Field
  2. Click on Text
  3. Click Insert Data on Top
  4. Click on Repeater Field
  5. Select Tab Content which we created earlier
  6. Click Insert

And this is what we should see:

ACF dynamic data added to the tab content inside Oxygen builder

Add a new "tab-inner-content" class to the tab content repeater child element.

Adding a new class to tab content child element

Add Code Block

Next, we will need to add a code block for extra CSS and JavaScript

  1. Remove HTML & PHP Code
  2. Add additional CSS
.non-active {
	opacity: .7;
}

.non-active:hover {
	opacity: 1;
}

.hidden {
	display: none;
}

Add the following JavaScript code:

const tabs = document.querySelectorAll(".tab");
const tabContent = document.querySelectorAll(".tab-inner-content");

let tabNo = 0;
let contentNo = 0;

tabs.forEach((tab) => {
  tab.dataset.id = tabNo;
  tabNo++;
  tab.classList.add("non-active");
  tab.addEventListener("click", function () {
    tabs.forEach((tab) => {
      tab.classList.add("non-active");
    });
    this.classList.remove("non-active");
    tabContent.forEach((content) => {
      content.classList.add("hidden");
      if (content.dataset.id === tab.dataset.id) {
          content.classList.remove("hidden");
      }
    });
  });
});

tabContent.forEach((content) => {
  content.dataset.id = contentNo;
  contentNo++;
  content.classList.add("hidden");
});


//We can set which tab content we want to show first, 0 = 1st, 1 = 2nd and so on...
tabs[0].classList.remove("non-active");
tabContent[0].classList.remove("hidden");
JavaScript inside the Oxygen Builder codeblock

The Result

Everything is now clickable and can be styled to your needs.

Dynamic Tabs inside oxygen builder using ACF with repeaters

I am just going to tidy up the look now with the following style adjustments:

  1. Add background color to section: #0b2035
  2. Apply flex to the button, and align-items to the centre
  3. Change tab content typography Color: #ffffff
  4. Add border color to tab content: 1px solid #fc7904

Here is the final result:

Final Result of the Oxgeyn Builder Custom Dynamic Tabs Using ACF Repeater

Now you can add as many tabs as you need in the repeater, and the tab buttons and content will be populated automatically.