21st Apr '23
/
5 comments

Category Posts Accordion in Bricks

This Pro tutorial provides the steps to set up a dynamic accordion of posts grouped by their categories based on the previous Posts Grouped by Categories in Bricks tutorial.

We are going to set up two query loops inside an Accordion (Nestable) Bricks element - one inside the other. The outer one loops through terms and the inner one through posts. We shall then write a bit of code using the bricks/posts/query_vars filter hook to restrict or limit the posts in the inner loop to only those assigned to the outer loop's current category.

Remember that this can be applied to posts of any post type grouped by a corresponding taxonomy (built-in or custom) and is not limited to just posts and categories.

Step 1

Copy and paste the entire Section from our test site in your Page/template (when editing with Bricks) using the Section's JSON from the link below.

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 621 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Recently Viewed Posts Bricks Query Loop

Recently Viewed Posts Bricks Query Loop

How to output the most recent X number of posts (any post type) viewed by the current visitor.
Categories:
Auto-Scroll to the New Open Accordion Item

Auto-Scroll to the New Open Accordion Item

How we can make sure the scroll position is always synced with the accordion when opened.
Categories:
Tags:
Pro
Dynamic Posts Lightbox in Bricks using GLightbox

Dynamic Posts Lightbox in Bricks using GLightbox

Steps to set create a dynamic lightbox with content from the post inside of the query loop.
Categories:
Pro
Ordering Posts by Terms in Bricks

Ordering Posts by Terms in Bricks

How to output upcoming events at the top and past events below in a single query loop in Bricks.
Categories:
Pro
Dynamic Horizontal Posts Accordion in Bricks

Dynamic Horizontal Posts Accordion in Bricks

Creating a horizontal accordion of featured images from posts output by Bricks' query loop.
Categories:
Tags:
Pro
How to Insert Element(s) Between Query Loop Posts in Bricks

How to Insert Element(s) Between Query Loop Posts in Bricks

Update on 16 Aug 2023: Follow this tutorial instead. This Pro tutorial shows how we can insert a Div (or any custom HTML) after nth…
Pro
Excluding Duplicate Posts from Query Loops in Bricks

Excluding Duplicate Posts from Query Loops in Bricks

How to ensure that posts are not duplicated when two query loops are used on the same page.
Categories:
Adding any Custom WP_Query loop to Bricks’ Query Loop

Adding any Custom WP_Query loop to Bricks’ Query Loop

Sometimes we may need to create a custom post loop using Bricks' query loop feature, but wish to use our own WP_Query code for more…