0

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)

Hunter Michael
  • 3
  • 3
  • Go look into jQuery's wrapping methods, https://api.jquery.com/category/manipulation/dom-insertion-around/ – CBroe Apr 21 '22 at 14:45
  • You can start with something like this, to wrap the heading and following items into a div container: https://jsfiddle.net/k7mp9f1w/ – CBroe Apr 21 '22 at 14:53
  • Using [this answer](https://stackoverflow.com/a/49552513/2181514) : https://jsfiddle.net/eux9vsgh/ : `$(".the-lesson-heading").each(function() { $(this).nextUntil(".the-lesson-heading").wrapAll("
    ") });` that *looks like* what you're trying to do.
     – freedomn-m Apr 21 '22 at 15:22
  • 1
    Thank you both!!! That seems to be exactly what I needed. And I think I can work from that!! P.S. New to Stackoverflow, I'll definitely be using this more often, it's a great platform :O – Hunter Michael Apr 21 '22 at 15:29
  • Okay, I got it working! But there's 1 small hiccup that I hope someone can help with. So it looks like there's also an ajax pagination added. So when I go to the next page the code is rendered useless because it needs to refresh again to activate the WrapAll method. Is there any solution to this? – Hunter Michael Apr 21 '22 at 16:13
  • Depends on how/when the ajax request is made - you might be able to hook into an event, eg if it uses [tag:datatables] or a [jquery global event](https://api.jquery.com/category/ajax/global-ajax-event-handlers/) such as .ajaxSuccess – freedomn-m Apr 21 '22 at 16:32
  • Thanks :) Again thanks for everyone's help. Was stressin for 12 hours trying to figure out how to do it before I finally admitted I needed help – Hunter Michael Apr 21 '22 at 17:42

0 Answers0