This tutorial provides the steps for automatically showing Oxygen‘s Repeater posts as an accordion using the Pro Accordion component of OxyExtras. We shall set post title as the accordion header and post content as the accordion body.
FAQ CPT items in the back end:
FAQ CPT items on the front end:
The Process
Place Pro Accordion inside the Repeater main Div.
Set query in the Repeater to show posts of your desired post type optionally filtered by a custom taxonomy.
Use Dynamic Data option to pull the post’s title for Header text.
Add Content or Excerpt inside the Pro Accordion for accordion body.
Step 1
In this example, we shall register a FAQ CPT and show its items in the accordion.
Create faq Custom Post Type using a plugin like CPT UI or otherwise.
Add FAQ items by entering the title and post content.
Step 2
Add a Section and inside a Repeater.
Go to Query area and set the WP Query to show the entries of your desired post type, in this case – faq.
Add a Pro Accordion component (make sure you have enabled it first in OxyExtras’ settings) inside the Repeater’s Div.
Dynamic Data → Header text. Select data button and select Post / Title.
Configure the rest of the settings in your accordion.
With the Pro Accordion selected in the Structure panel, + Add → WordPress → Dynamic Data → Content.
If you notice that the Text element gets added without the enclosed Span element, add WordPress → Dynamic Data → Content somewhere above/outside the Pro Accordion and then move it inside. Similarly, if you find that you are not able to delete an element inside a Pro Accordion component, move it outside and then you will be able to.
That’s it. Visit the front end and you should now see the posts appear as accordion with expand-collapse functionality.