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.
6 comments
Clint Neilsen
The ‘Live Demo’ link https://bricks.wpdemo.dev/accordion/ is broken
Sridhar Katakam
Works fine here. Can you share a screenshot of how it looks on your end?
Jordan Huang
What’s the advantage of this accordion vs. the one built into Bricks Builder?
Sridhar Katakam
I do not think it is possible to 1) use sub fields inside a field group 2) change transition duration with the built-in Accordion element.
Nora Holmquist
I tried to look at one of the references (https://wpdevdesign.com/how-to-display-sub-fields-of-a-meta-box-group/) and did not have access. I am a pro member of Brickslabs, but not of wpdevdesign.
Sridhar Katakam
Updated.