Opens in a new tab
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 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

How to create filters with IsotopeJS in Bricks (Part 4): AJAX filter and infinite loops, Sorting, List view and Disable animations

How to create filters with IsotopeJS in Bricks (Part 4): AJAX filter and infinite loops, Sorting, List view and Disable animations

This tutorial will explain how to enable the AJAX filter with an infinite scroll query loop container, how to add a sorting function, how to…
Categories:
Pro
Parent Query Loop Object – Traversing Nested Query Loops Up in Bricks

Parent Query Loop Object – Traversing Nested Query Loops Up in Bricks

Bricks enables us to build nested query levels of unlimited levels. Here are a couple of examples: Sometimes, you might want to obtain the parent…
Categories:
Making Bricks Nestable Accordion’s First Item Open on Desktop and Closed on Mobile

Making Bricks Nestable Accordion’s First Item Open on Desktop and Closed on Mobile

Using JS to ensure the accordion first entry is open on desktop but closed on mobile.
Categories:
Tags:
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.
Categories: