ACF Repeater Sub Field Values as Tabs in Bricks

Bricks’ query loop supports ACF Repeaters and Meta Box Groups out of the box besides posts, users and terms.

This tutorial shows how we can output the values of sub fields of a ACF Repeater as tab titles and content in Bricks without writing a single line of code, thanks to its nestable Tabs element.

ACF Field Group:

Repeater being populated for a specific Page:

Tabs on the front end:

Create a Tabs (Nestable) element inside a Section’s Container.

Delete the second Div under the “Tab menu” element.

Delete the second Pane under the “Content” element.

Select the Div under the Tab menu and enable query loop.

Click the query icon and set the query type to your ACF Repeater.

Change the text of the Basic Text element inside to your Title sub field using the dynamic data (bolt) button.

It should look like this:

{acf_features_title}

Select the Pane under the Content and enable query loop.

Click the query icon and set the query type to your ACF Repeater.

Change the text of the Rich Text element inside to your Title sub field.

It should look like this:

{acf_features_blurb}

JSON export of the Section.

Get access to all 526 Bricks code tutorials with BricksLabs Pro

2 comments

Leave your comment

 

Related Tutorials..

Pro
ACF Options Fields in Bricks

ACF Options Fields in Bricks

This Pro tutorial walks you through outputting the values of custom fields attached to an ACF Pro's Options page in Bricks builder. We shall register…
Categories:
Pro
How to Update Custom Fields with Default Values For Existing Posts when using ACF

How to Update Custom Fields with Default Values For Existing Posts when using ACF

Let's take a scenario where there are 10 Pages in a WordPress site. You proceed to create a Text-type of custom field called, say, "Custom…
Categories:
Tags:
ACF Checkbox Items with Custom SVG Bullets in Bricks

ACF Checkbox Items with Custom SVG Bullets in Bricks

We walk through outputting list items with SVG icons based on the choice of a ACF Checkbox field.
Categories:
Tags:
Pro
Conditionally Hiding Bricks Filters based on Select Filter Value

Conditionally Hiding Bricks Filters based on Select Filter Value

How show or hide Bricks' filter based on the selection made by another filter.
Categories:
Tags:
Pro
Horizontal Scrolling Tabs in Bricks

Horizontal Scrolling Tabs in Bricks

Nestable Tabs element in Bricks wraps into multiple lines out of the box at smaller viewport widths. This Pro tutorial provides the steps to remove…
Categories:
Tags:
Pro
Conditional Output Based on ACF Date Field in Bricks

Conditional Output Based on ACF Date Field in Bricks

Updated on 1 Aug 2024 Looking to have a Section or other elements in Bricks rendered on the frontend only if today's date is before…
Categories:
Pro
Conditional Output based on Date Time Picker Field in Bricks

Conditional Output based on Date Time Picker Field in Bricks

In the past, we showed how elements can be conditionally output based on a post's Date type of ACF field here. This Pro tutorial for…
Categories:
Pro
Featured Image’s Meta in a Bricks Posts Query Loop

Featured Image’s Meta in a Bricks Posts Query Loop

How to output values of custom fields for the featured image of current post in a query loop
Categories:
Tags: