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 610 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Dynamic Posts Side Menu with Expandable and Collapsible Accordion Submenus in WordPress

Dynamic Posts Side Menu with Expandable and Collapsible Accordion Submenus in WordPress

This Pro tutorial provides the steps to show all the posts of a specified post type as menu items with accordion functionality for submenus. This…
Categories:
Pro
Filtering posts by a group field’s subfield value with Meta Box when using a custom table in Bricks

Filtering posts by a group field’s subfield value with Meta Box when using a custom table in Bricks

Filtering a query loop to output only those posts with the value of a Select subfield of a Group field set to Yes when using…
Categories:
Tags:
Pro
Accordion Grid Query Loop in Bricks

Accordion Grid Query Loop in Bricks

How to set up a accordion in Bricks such that the "titles" are arranged in a grid with the full width content opening below.
Categories:
Pro
Top-level Pages and Children Bricks Query Loop

Top-level Pages and Children Bricks Query Loop

This Pro tutorial for Bricks users can be considered Part 2 or a variation of the earlier Bricks Query Loop for Top-level Parent Pages with…
Categories:
Pro
Post ID Query Variable-based Post Output in Bricks

Post ID Query Variable-based Post Output in Bricks

How to query a single post of a custom post type using the post ID passed to a page via a URL parameter.
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
Querying Posts by ACF Date Sub Field in Bricks

Querying Posts by ACF Date Sub Field in Bricks

Updated on 17 Nov 2023. This Pro tutorial shows how we can set post__in query parameter of a query loop in Bricks to an array…
Categories:
Tags:
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…
Pro
ACF User Field Bricks PHP Query

ACF User Field Bricks PHP Query

In the Bricks Facebook group a user asks: my end goal was to create a set of cards that would display the Users that are…
Categories: