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: