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

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Conditionally Outputting Query Loop Item Based on Post Meta in Bricks

Conditionally Outputting Query Loop Item Based on Post Meta in Bricks

Rendering query-loop enabled posts depending on the value of each post's custom field value is tricky because by default, the custom field plugins' functions or…
Categories:
Pro
Post-specific ACF Repeater Galleries as Sliders in Bricks

Post-specific ACF Repeater Galleries as Sliders in Bricks

How to output ACF Repeater field rows with the images of the Gallery-type sub field as a slider.
Pro
“My Favorites” in Bricks

“My Favorites” in Bricks

This Pro tutorial provides the steps to set up and use My Favorites in Bricks Builder.
Categories:
Pro
Posts Grouped by Years and Months in Bricks

Posts Grouped by Years and Months in Bricks

How display posts organized by months & within years based on the published date.
Categories:
Pro
Categories and SubCategories Query Loop Tabs in Bricks

Categories and SubCategories Query Loop Tabs in Bricks

Learn how to show top-level parent categories as tab titles and the corresponding subcategories as tab contents using Bricks nested queries.
Categories:
How to create a dynamic infinite logo slider with ACF and Bricks

How to create a dynamic infinite logo slider with ACF and Bricks

This tutorial provides the builder settings, PHP & CSS codes that can be pasted in order to create an infinite logo slider in pure CSS…