Dynamic Accordion with Loops & Logic

I have one challenge that is confusing my head a little.

If you look at this Page-- Screenshot by Lightshot

You will see that it has an Accordion, but we need this Accordion to show Dynamic Content pulled from Post Content.

So that all Headings within a particular part of the Post Body will be a new Accordion Heading, and all contents below that Heading will form the Accordion Content.

I will create a Container, and give it a Class Name of “Post Content”.

All information within this container needs to be displayed on the frontend as an Accordion dynamically.

All Headings within this container will become each Accordion Heading, and all contents below each Heading in this conainer will be the Accordion Content of each Accordion Heading.


In the container, Heading 1 is “What is Product Management”. Then it has contents below it.

Heading 2 in the container is “Product Research”. Then it has contents below it.

How can I create a Dynamic Accordion with LOOPS & LOGIC-- which will display every Heading within the specified container, as an Accordion Heading, and the Content below that Heading as the corresponding Content, in a dynamic way: such that the number of Accordion Headings and contents per Post, will be according to the Headings and contents within the specified container in the Post?

You see, I don’t think it is possible to achieve such Dynamic Accordion in this life.

But at the same time, such statement could be my ignorance talking :blush:

Please, if you have any smart way to achieve this with LOOPS & LOGIC, Please educate me on it.

2.) Also show me how to make this outcome a Shortcode that I can paste anywhere on my Post or Pages.

Needing to hear from you soon.


Figured I’d link out to the Facebook group post and WordPress support forum post where this has already got a decent amount of traction and responses in case other people discover this forum thread and are looking for answers.

I also wanted to mention that I’ve just added an accordion snippet example to the L&L site so that might help you construct the actual accordion, though populating it with data the way you want will be tricky.