Does anyone know of a way this can be done? Or if there is a name for it so I can do research into it myself? Skip "Background" and "The Issue" If you don't really need it, just maybe some more info if needed.

Background: Basically I have something called LearnDash and they don't have a collapse feature available for a certain option that I need. So I looked into doing it myself thinking it shouldn't be too difficult to make it. But the way they had it coded was unfortunate and I don't have a child theme since I'm using something called Oxygen Builder so editing the main files themselves is not the best method.

The issue: They have it so that the "Headings" are under the same Parent as the Divs I want. Making the method I was thinking of using invalid (Dont ask me to explain this I' just tried explaining it as Im writing this out and my mind went blank)

The Question: Is there a way I can take Each instance of a class and put everything UNDER it into a collapsible until it hits the next class?

I.E

<div class="the-lesson-heading"></div>
<div class="lesson-list-item"></div> 
<div class="lesson-list-item"></div> 
<div class="lesson-list-item"></div> 
<div class="the-lesson-heading"></div>
<div class="lesson-list-item"></div> 
<div class="lesson-list-item"></div> 

If there is a specific term for this please let me know. And if this is possible would I be able to put it into a function (As I mentioned before editing the main files wouldn't be the best method, but totally doable if necessary. Already have some custom parts in them I have to replace every plugin update)