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. Backend: Frontend:

Step 1

Install and activate Custom Post Type UI. Go to CPT UI > Add/Edit Post Types. Add service post type like so: Click "Add Post Type" button.

Step 2

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 question and answer sub fields. Ensure that the field group is attached to the service CPT.

Step 3

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.

Step 4

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.

Step 5

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 question and answer sub fields for each row. Add a Code Block. Go to Advanced > Size & Spacing and set Width to 100%. PHP & HTML: