Create Dynamic Tabs in Bricks Builder with ACF

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.

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.

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.

3. Add "scroll" to Overflow in Styles

4. Add new Block inside Container
5. Add new class ".tab"
6. Activate "Use query loop"
7. Set type: ACF Repeater: Dynamic Tabs
8. Align (block): Center

9. Set HTML tag to custom, and add button

10. Add Basic Text field inside Block
11. Click on the "Select Dynamic Data" lightning icon inside the text box
12. Select under ACF "Tab Header (Dynamic Tabs)"

13. Add padding: 10px 20px 10px 20px

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

5. Add Padding: 10px 20px 10px 20px

6. Add Basic Text field to the Tab Content Container
7. Select in dynamic data under ACF: Tab Content (Dynamic Tabs)

Adding JavaScript

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

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>

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

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!