Learning Javascript OOP with a Collapsing Item Class I'm trying to get into object oriented javascript programming. I have written a class for collapsible elements as a test. These elements all have a certain class and no matter how many elements there are on the page, they should all be collapsible.
It works so far, but I don't think it's very elegant yet. For example, I wonder if the function &quot;checkforCollapsibles&quot; doesn't actually belong in the class? But can a class create instances of itself?
But that's probably not the only thing. I would be very happy if you have any suggestions on how to make this even better, cleaner and more elegant ;-)
--- EDIT: I know you don't need a class for collapsing elements :-)
&quot;use strict&quot;;

class bb_Collapsible {
  constructor(link, content) {
    this.link = link;
    this.content = content;
    this.content.classList.toggle(&quot;bb-collapsed&quot;);
    this.link.addEventListener(&quot;click&quot;, this);
  }
  handleEvent(event) {
    if (event.type === &quot;click&quot;) {
      this.switchStatus();
    }
  }
  switchStatus() {
    this.content.classList.toggle(&quot;bb-collapsed&quot;);
  }
}

function checkForCollapsibles() {
  const collapsibleLinks = document.querySelectorAll(&quot;.bb-collapsible&quot;);
  const collapsibleContents = document.querySelectorAll(&quot;.bb-collapsible-content&quot;);

  if (collapsibleLinks.length &gt; 0) {
    collapsibleLinks.forEach((element, index) =&gt; {
      new bb_Collapsible(collapsibleLinks[index], collapsibleContents[index]);
    });
  } else {
    console.log(&quot;No collapsible Elements&quot;);
  }
}
document.addEventListener(&quot;DOMContentLoaded&quot;, checkForCollapsibles);

EXTENSION
I used this article for event handling. However, I don't quite understand it yet. In the example, only pass this as the callback. I assume javascript interprets this as the eventHandle function of the respective instance. But what if I have different elements that should trigger different functions? In my example, I could only ask which event was triggered and not which element? Or should I then write switches and get it from the respective event object? but that no longer sounds clean and tidy to me.
https://dev.to/rikschennink/the-fantastically-magical-handleevent-function-1bp4
This seems over-engineered. If really all you need is this.content.classList.toggle(&quot;bb-collapsed&quot;); then I would simply go for
class Collapsible {
  constructor(link, content) {
    this.link = link;
    this.content = content;
    this.content.classList.toggle(&quot;bb-collapsed&quot;);
    this.link.addEventListener(&quot;click&quot;, e =&gt; content.classList.toggle(&quot;bb-collapsed&quot;));
  }
}

And from there, there really isn't much of a point in having a class. You could do that straight in your checkForCollapsibles.
Something like this
function wireCollapsibles() {
  const links = document.querySelectorAll(&quot;.bb-collapsible&quot;);
  const contents = document.querySelectorAll(&quot;.bb-collapsible-content&quot;);

  links.forEach((link, index) =&gt; {
    new bb_Collapsible(collapsibleLinks[index], collapsibleContents[index]);
    link.addEventListener(e =&gt; contents[i].classList.toggle(&quot;bb-collapsed&quot;));
  });
}

Note that I drop the console.log thing, ideally you dont have log statements in your production code.