Create Dynamic Tabs in Oxygen Builder with ACF

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.

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.

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.

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

Make typography changes:

• Color: #ffffff
• Font Weight: 700
• Text Transform: uppercase

Add custom CSS for accessibility:

• cursor: pointer;

Add padding inside size and spacing:

• Padding top and bottom: 10px
• Padding left and right: 10px

Add border styles

• Color: #fc7904
• Width: 1px
• Style: Solid

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”

1. Click on “Repeater Field”
2. Select “Tab Header”
3. Click “Insert”

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”

Add Styles

Add some styles inside Size & Spacing:

• Padding top and bottom: 10px
• Padding right and left: 20px
• Width: 100%
• Min-height: 300px

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:

Add a new “tab-inner-content” class to the tab content repeater 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");

The Result

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

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:

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