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
Filtering Bricks Query Loop By Meta Box Relationship

Filtering Bricks Query Loop By Meta Box Relationship

In the Bricks Facebook group a user asks: Consider this setup: CPTs: Service Areas and City Pages Meta Box Relationship: City Pages to Service Areas…
Read more →
Categories: Bricks, Plugins, Pro
Tags: Meta Box, Relationship
Pro
Filtering Meta Box Cloneable Group by Select Subfield for Multiple Bricks Query Loops with Conditional Output

Filtering Meta Box Cloneable Group by Select Subfield for Multiple Bricks Query Loops with Conditional Output

In the Bricks Facebook group a user asks: Consider this cloneable Meta Box field group for a Custom Post Type called Tour: with the Tour…
Read more →
Categories: Bricks, Plugins, Pro
Tags: bricks/query/result, Filters, Meta Box
Pro
Meta Box Color Picker to CSS Custom Property Workflow in Bricks

Meta Box Color Picker to CSS Custom Property Workflow in Bricks

This Pro tutorial provides the steps to declare a custom property (CSS variable) whose value is equal to the post-specific color set via a custom…
Read more →
Categories: Bricks, Plugins, Pro
Tags: Meta Box
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
WooCommerce Product Carousel in Bricks

WooCommerce Product Carousel in Bricks

How to set up a carousel that shows WooCommerce products with the product title, price and Add to Cart button for each.
Read more →
Categories: Bricks, Pro
Tags: Accordion, WooCommerce
Pro
Meta Box Group Subfield Text’s Slug as Query Loop Item ID in Bricks

Meta Box Group Subfield Text’s Slug as Query Loop Item ID in Bricks

In the BricksLabs Facebook group a user asks: I have a metaBox custom field called 'section_title' inside a clonable metabox group called 'about_section' How can…
Read more →
Categories: Bricks, Plugins, Pro
Tags: Meta Box
Pro
Meta Box Relationship in Bricks using Posts Query Loop

Meta Box Relationship in Bricks using Posts Query Loop

This Pro tutorial is similar to the recent ACF Relationship in Bricks using Posts Query Loop guide but for Meta Box. In the past, we…
Read more →
Categories: Bricks, Plugins, Pro
Tags: Meta Box, Relationship
Pro
Update Post Meta From Another Custom Field’s Value on Post Publish/Update when using Meta Box

Update Post Meta From Another Custom Field’s Value on Post Publish/Update when using Meta Box

In the Meta Box Facebook group a user asks: Hi all, wondering if I can get some help. For custom field 1, I am using…
Read more →
Categories: Plugins, Pro
Tags: Meta Box