Best way to create an accordion dropdown

My team would like to implement an accordion dropdown on one of our pages, as it's addresses the problem of seamlessly displaying many categorized ordered lists.

Here's a sample of the desired outcome, implemented in codepen.io
Sample in Codepen.io


I understand there are risks with utilizing js and the admins of this platform are generally not happy when people use them. Mine is vanilla js and not external, however. I'd like to work with the creators of FTH and not get my website frozen/ wiped. Here's a snipped of the code I'd like to use.

FTH does not support any 3rd party scripts. If your script breaks anything we will clear the page.
Please read the Terms of use.
support.toastmastersclubs.org/doc/item/terms-of-use-agreement

Refer to this post for creating accordions in FTH
support.toastmastersclubs.org/2011-10-23...dion-in-your-content

Any comment on this response?

So you pulled one of my posts from over 5 years ago...

The fundamental problem is that you may move on from Toastmasters and then your current club is stuck with maintaining whatever you implemented. They will then likely come to us and ask us to help them update your code. We really do not want to be in the position of having to teach people how to do Javascript correctly (not our purpose) or having to fix some problem that somebody else created because they did not heed our warnings. We are volunteers giving up a bit of our little spare time.

In your case, class names "accordion" and "active" will sooner or later end up clashing w/ our code. Only good work around is prefixing them with your club number.

To be fair, the thread with the official, endorsed accordion solution is also over 5 years old. I'm just working with whatever information I can gather. But I'll stick with the linked solution as I really don't want to pull teeth over this. Thanks for all your help.