In this tutorial, I'll show you how to make dynamic tabs in Bricks Builder with the new feature Query Loop using ACF, which will allow you to style the tabs to your custom preference.

Tabs that I will be recreating for Brick Builder: Simple Tabs on Codepen

Bricks 1.5 (RC 2) was used to make this tutorial.

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 "New Lines" 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, and publish the newly created group field.

Creating repeater field for tabs inside ACF group field

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 many repeaters you have as we are going to make it fully responsive.

In this scenario, I will create 4 tabs, and update the page.

Populating ACF Repeater field

Create Query Loop inside Bricks Builder

  1. Add new class ".tab-header" inside container
  2. Change Layout in .tab-header Direction: Horizontal(row), and inside id deactivate it.
Configuring tab header for TABS
r
  1. Add "scroll" to Overflow in Styles
Add scroll to overflow in bricks builder
  1. Add new Block inside Container
  2. Add new class ".tab"
  3. Activate "Use query loop"
  4. Set type: ACF Repeater: Dynamic Tabs
  5. Align (block): Center
adding block inside Brick Builder
  1. Set HTML tag to custom, and add button
Adding Custom HTML tag as button inside bricks
  1. Add Basic Text field inside Block
  2. Click on the "Select Dynamic Data" lightning icon inside the text box
  3. Select under ACF "Tab Header (Dynamic Tabs)"
Adding dynamic data inside text field
  1. Add padding: 10px 20px 10px 20px
adding padding inside bricks builder

Add Dynamic Tab Content

Let's create a 2nd Query Loop, which will hold the content of the tab.

  1. Create a new container inside the same section
  2. Add a new class ".tab-content"
  3. Select Use query loop
  4. Select ACF Repeater: Dynamic Tabs
Adding a tab container insidee bricks
  1. Add Padding: 10px 20px 10px 20px
Adding padding do container
  1. Add Basic Text field to the Tab Content Container
  2. Select in dynamic data under ACF: Tab Content (Dynamic Tabs)

Adding JavaScript

First, ensure you have code execution enabled in Bricks settings for Administrators

Enable Code Execution in Bricks Builder
  1. Add Code Block at the bottom of the section
  2. Add the below code
  3. Apply "Execute Code"
<script>
const tabs = document.querySelectorAll(".tab");
const tabContent = document.querySelectorAll(".tab-content");

let tabNo = 0;
let contentNo = 0;

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

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


//We can set which tab content we want to show first, 0 = 1st, 1 = 2nd and so on...
tabs[0].classList.remove("tab-non-active");
tabContent[0].classList.remove("tab-hidden");
</script>
Adding Code inside Bricks Builder

Let's add some more CSS

<style>
.tab-hidden {
  display: none;
}
.tab-non-active {
  opacity: 0.7;
}
.tab-non-active:hover {
  opacity: 1;
}
</style>

Now save the progress and go back to the front end and you should see it working.

Style all elements of the tabs as you like them to be, for example, I will add some more code to tidy it up:

  1. Add Background color to tab: #fc7904
  2. Add border to tab content: 1px solid #fc7904
  3. Set min-height for content: 100px
  4. You may need to set the body to overflow-x: hidden, and
  5. And Save all the edits
It doesn't look right in the back end, but on the front, all working ok.

Final Result

The final result on the front end:

Conclusion

Now you can use ACF Repeater to add or change tab content from inside the page without entering the bricks builder, and they will be populated automatically.

This can speed up the time by just using the ACF repeater to add content, and you may want clients or someone else not to have access to the bricks builder, and instead allow them to easily edit text, add more or remove tabs.

And you can style tabs to your preference!