Custom Post Type with FAQs using ACF Pro Repeater Field and Expand Collapse Functionality
This members-only tutorial provides the steps to develop an Oxygen template for single pages of a "service" Custom Post Type with an attached "faq" ACF Pro Repeater field automatically appearing with expand-collapse functionality using jQuery Collapse.
Install and activate Custom Post Type UI.
Go to CPT UI > Add/Edit Post Types.
service post type like so:
Click "Add Post Type" button.
Install and activate Advanced Custom Fields Pro.
Go to Custom Fields > Tools and import this field group.
This should add a "FAQ" field group having
questions_and_answers repeater field with
answer sub fields.
Ensure that the field group is attached to the service CPT.
Go to Services > Add New.
Add your service post type entries with Title, Content, Featured image and as many Question and Answer pairs as you want for each.
Go to Oxygen > Templates.
Add a new template named say, "Service CPT Single".
Set it to inherit from your Main template having the site header and footer.
Apply it to Singular > Services with a priority of 1 (or more depending on how your template for sitewide single entries is setup).
Edit it with Oxygen.
Add a Section and add your desired elements like the Post Title, Featured image and Content.
Let's loop through the
questions_and_answers field and output the
answer sub fields for each row.
Add a Code Block.
Go to Advanced > Size & Spacing and set Width to 100%.
PHP & HTML:
This is a premium members-only content.
To view the rest of the content, please sign up for membership ($47/month or $599 one-time).
Already a member? Log in below or here.