Accordion Grid Query Loop in Bricks

This Pro tutorial provides the steps to set up a query loop on a nestable accordion element in Bricks such that the "titles" are arranged in a grid with the corresponding content (panels) opening below the clicked title either taking up the container width or going edge to edge.

We shall also add a working close icon for the panels.

Use Case: Show team member cards with member info neatly expanding when the headshot + name is clicked.

Since a standard nestable accordion element is being used with a query loop, we have full control w.r.t what info appears before and after the accordion items expand. In the screenshot below, several custom field values that are set up with ACF are being shown.

Sample demo of content in the container width:

Sample demo with edge to edge content:

Step 1

Edit your Page/template with Bricks.

Step 2

Container width