21st Apr '23
/
0 comments

Dynamic Horizontal Posts Accordion in Bricks

Update on 8 Sep 2024: You may want to follow the newer version that considers accessibility.

Looking to make a Horizontal Image Accordion dynamic?

This article for Pro members provides JSON code that can be pasted in your Bricks Page/template to show the featured images, titles and excerpts of the 5 latest posts.

We shall also update a few query parameters to make it more performant.

Step 1

Copy the following JSON and paste in your Page/template when it is being edited with Bricks.

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Tagged:
Bricks
Horizontal Accordion
Pro
Query Loop

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

Related Tutorials..

Pro
CMB2 Repeatable Group Bricks Query Loop

CMB2 Repeatable Group Bricks Query Loop

This Pro tutorial provides the steps to create a custom query loop type for outputting the subfield values of a Group field (repeatable) when using…
Read more →
Categories: Bricks, Plugins, Pro
Tags: CMB2, Custom Query Type
Pro
6 Random Featured Posts in Alphabetical Order in Bricks

6 Random Featured Posts in Alphabetical Order in Bricks

How to output x number of random posts with a specific meta value set, in Alphabetical order.
Read more →
Categories: Bricks, Pro
Tags: Query Loop
Pro
Masonry Accordion Query Loops in Bricks Builder

Masonry Accordion Query Loops in Bricks Builder

Learn how to enable masonry layout for nestable accordions in Bricks builder and use JavaScript to re-layout the masonry on accordions' open and close.
Read more →
Categories: Bricks, JavaScript, Pro
Tags: Accordion
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…
Read more →
Categories: Bricks, Plugins, Pro
Tags: ACF, Users Query
Querying Posts by Date Field to Exclude Past Events with ACPT Plugin

Querying Posts by Date Field to Exclude Past Events with ACPT Plugin

In the Bricks' Facebook group, a user asked: Meta query? What am I missing?Hi all, really need a little guidance on this one. I have…
Read more →
Categories: Bricks, Free, Plugins
Tags: ACPT, Query Loop
How to display a Query Loop in 3 columns in Bricks

How to display a Query Loop in 3 columns in Bricks

This tutorial provides the builder settings and CSS codes that can be pasted in order to create a 3-columns query loop container inside Bricks Builder.
Read more →
Categories: Bricks, Free
Tags: CSS, CSS Grid, Flexbox, Query Loop
How to create filters with IsotopeJS in Bricks (Part 3): apply multiple filters

How to create filters with IsotopeJS in Bricks (Part 3): apply multiple filters

This tutorial will review how to apply multiple filters to an isotope container using the IsotopeJS library‘s features in Bricks.
Read more →
Categories: Bricks, Free, Plugins
Tags: ACF, Animations, Isotope, Query Loop
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.
Read more →
Categories: Bricks, Pro
Tags: Query Variables, URL Parameter