How to Build Dynamic Tabs and Accordions Using Bricks Builder

We’ll take a look at Bricks’ powerful ‘nestable’ elements and how you can use custom loops to pull in live content from your WordPress posts. It’s easier than you might think!

The end result? A clean, functional tabbed layout where each tab pulls in content dynamically from WordPress. Perfect for giving your users easy access to loads of information, but in a neat UI.

Let’s get stuck in.

Why Use Nestable Elements?

Bricks Builder gives you two types of tabs or accordion components:

• The standard (non-nestable) versions
• The nestable versions

Always opt for the nestable option. The old legacy versions aren’t very accessible, offer limited flexibility, and generally don’t belong in modern builds.

Nestable tabs and accordions, on the other hand, allow you to use regular Bricks elements, such as text, images, and even Gutenberg content, giving you complete control without messy workarounds.

Step 1: Add the Nestable Tabs Element

Start by creating a section and a container in your layout. Then head over to the Elements panel, search for “Tabs”, and select “Tabs Nestable”.

Once added, you’ll get a basic tabs layout with multiple tabs and content panes—this will be our base structure.

To simplify things for now:

• Remove all but one Tab Title from the “tab menu”
• Remove all but one Tab Content Pane from the “tab content”

You’ll now have a single tab title and a single content pane, perfect for setting up our loop.

Step 2: Set Up a Dynamic Query Loop for the Tab Titles

We want each tab to display the title of a WordPress post. Here’s how:

1. Select the tab title (the text element inside the “tab menu”).
2. In the settings panel, enable “Use Query Loop”.
3. Leave the query set to ‘Posts’ (this will loop through your WordPress posts).
4. Now replace the placeholder ‘Title 1’ with dynamic data:

• Click the database icon to open your dynamic tags
• Choose “Post Title”

And that’s it, each tab title now dynamically displays a post title.

Note: If your post titles are pretty long, you may want to consider using an accordion instead of tabs to preserve layout space.

Step 3: Loop the Tab Content Panes

Next up, we want each content pane to display the full content of its corresponding post.

1. Select the associated tab content pane.
2. Enable “Use Query Loop” from the settings.
3. Again, set this to use ‘Posts’.
4. Click into the Rich Text element inside the content pane.
5. Remove any placeholder text.
6. Use dynamic data to insert “Post Content”.

As before, you might see placeholder or scrambled content in the Bricks editor; they’re just previews. On the live site, actual content from your posts will appear instead.

Step 4: Preview and Test

Save your changes and preview the layout on the front end. You should now see a functional tab layout:

• Each tab title reflects a post title from your WordPress site.
• Clicking on a tab loads that post’s content into the content area.

This works brilliantly with Gutenberg content; images, embedded media, text formatting, and even code blocks will be displayed neatly in the tabs.

Final Thoughts

Using Bricks Builder’s nestable tabs and accordions combined with query loops and dynamic data is a powerful way to build flexible, content-driven layouts.

You can easily apply this technique for FAQs, product details, tutorials, or support documentation, all powered by your existing WordPress content.

And once you’ve got the basics down, you can step things up with custom post types, advanced query filters, or fancy styling to match your site.

If you’d like a follow-up showing a more advanced use case, just let me know.