1st Jul '22
/
6 comments

Dynamic Accordion in WordPress using Meta Box and Alpine.js

This Pro tutorial provides the steps to implement an accordion using Alpine.js in WordPress that pulls the values of sub fields of a Meta Box group for a dynamic FAQ accordion.

Step 1

Install Meta Box and Meta Box AIO plugins.

Create a new field group having a group-type of field with two sub fields or import this.

In this example, faq group field having question text-type sub field and answer wysiwyg-type field.

Set the field group to appear on your desired post type, in this example: page.

Step 2

Edit your Page(s) and populate the field group.

Step 3

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Tagged:
Accordion
Alpine.js
Meta Box
Plugins
Pro
WordPress

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

Related Tutorials..

Pro
Sort Posts by Meta Box Group Sub Field in Bricks

Sort Posts by Meta Box Group Sub Field in Bricks

This Pro tutorial provides the steps to order posts in Bricks by the value of a Number-type of sub field that is inside a Meta…
Read more →
Categories: Bricks, Plugins, Pro
Tags: bricks/query/result, Meta Box
Pro
Dynamically Displaying Connected Content Offer Images in Bricks using Meta Box Relationship

Dynamically Displaying Connected Content Offer Images in Bricks using Meta Box Relationship

Consider the following scenario from a recent project I worked on. CPT 1: project CPT 2: content-offer Taxonomy for Projects: remodel-typeSample term names: Backyard Cottages…
Read more →
Categories: Bricks, Plugins, Pro
Tags: Custom Functions, Meta Box
Pro
Conditionally outputting an element in a Query Loop based on date-type custom field

Conditionally outputting an element in a Query Loop based on date-type custom field

This Pro tutorial shows how to output an element in a Bricks' query loop only if the value of a date-type of custom field for…
Read more →
Categories: Bricks, Plugins, Pro
Tags: Conditions, Meta Box
Pro
Offcanvas in Bricks using Alpine.js

Offcanvas in Bricks using Alpine.js

This Pro tutorial provides the steps to set up an offcanvas panel in Bricks using Alpine.js. Clicking on a button will slide open the panel…
Read more →
Categories: Bricks, Pro
Tags: Alpine.js, Offcanvas
Pro
Bricks Forms + Meta Box: Auto-Create Post Relationships on Form Submission

Bricks Forms + Meta Box: Auto-Create Post Relationships on Form Submission

How to link a Bricks post-creation form on a post to a newly created post of another post type using Meta Box relationship.
Read more →
Categories: Bricks, Plugins, Pro
Tags: Bricks Form, Meta Box, Relationship