Opens in a new tab
16th Mar '26
/
0 comments

Masonry Accordion Query Loops in Bricks Builder

This Pro tutorial provides the steps to enable masonry for posts query loops inside an Accordion (Nestable) Bricks element.

Step 1

Edit your Page/Template with Bricks and paste the Section's JSON after copying it from here.

Step 2

Enable masonry controls for nestable accordion elements and inject Isotope JS library (built into Bricks)'s sizer elements into the elements.

Add the following in child theme's functions.php (w/o the opening PHP tag) or a code snippets plugin:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Tagged:
Accordion
Bricks
JavaScript
Pro

Sridhar Katakam

Sridhar Katakam is a Bricks enthusiast. He likes helping others by researching and solving WordPress-related problems and building websites.

Get access to all 634 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Post Titles and Post Content Tabs in Bricks

Post Titles and Post Content Tabs in Bricks

How to set up Nestable tabs with post titles as the tab menu, and post content and/or any other post-specific data as the tab content.
Read more →
Categories: Bricks, Pro
Tags: Query Loop, Tabs
How to apply a custom query var to multiple query loops in Bricks

How to apply a custom query var to multiple query loops in Bricks

In this tutorial, we'll learn how to apply a PHP filter to modify the query var of multiple query loops in a single function Introduction…
Read more →
Categories: Bricks, Free
Tags: Dynamic Data, Query Loop
Pro
6 Random Posts from Tag A + 6 Random Posts from Tag B in a Single Bricks Query Loop

6 Random Posts from Tag A + 6 Random Posts from Tag B in a Single Bricks Query Loop

Displaying two set of random posts, inside one query loop.
Read more →
Categories: Bricks, Pro
Tags: Query Loop
Using WP Grid Builder Facets with Bricks’ Query Loop

Using WP Grid Builder Facets with Bricks’ Query Loop

Update: This tutorial was written before WPGB had a Bricks add-on. Now, it is advisable to use that add-on instead. Get it from here. Updated…
Read more →
Categories: Bricks, Free
Tags: Query Loop, WPGridBuilder
Pro
Search Results Grouped by Post Types in Bricks

Search Results Grouped by Post Types in Bricks

Updated on 08 Oct 2024 This Pro tutorial provides the steps to arrange the search results by specified post types in a Bricks site. We…
Read more →
Categories: Bricks, Pro
Tags: Nested Queries, Search Results
Pro
Events grouped by months within years based on event date custom field value

Events grouped by months within years based on event date custom field value

How to output events grouped by years and months using three nested query loops in Bricks.
Read more →
Categories: Bricks, Pro
Tags: Nested Queries
Pro
Adding active class to the current term/post in a Bricks query loop on Term archives/single posts

Adding active class to the current term/post in a Bricks query loop on Term archives/single posts

Updated on 29 Feb 2024 In the Sibling Terms Bricks Query Loop tutorial, a member asked: How can I set the class "active" to the…
Read more →
Categories: Bricks, Pro
Tags: Query Loop, Terms Query
How to populate a map with dynamic markers from a CPT using ACF in Bricks (PART 2)

How to populate a map with dynamic markers from a CPT using ACF in Bricks (PART 2)

This tutorial provides the PHP & JS codes that can be pasted in order to create a flying effect on map markers each time your…
Read more →
Categories: Bricks, Free, Plugins
Tags: ACF, Animations, Maps, Query Loop