Learning Javascript OOP with a Collapsing Item Class

Question

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 "checkforCollapsibles" 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.

I know you don't need a class for collapsing elements.

"use strict";

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

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

  if (collapsibleLinks.length > 0) {
    collapsibleLinks.forEach((element, index) => {
      new bb_Collapsible(collapsibleLinks[index], collapsibleContents[index]);
    });
  } else {
    console.log("No collapsible Elements");
  }
}
document.addEventListener("DOMContentLoaded", 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

Answer 1

This seems over-engineered. If really all you need is this.content.classList.toggle("bb-collapsed"); then I would simply go for

class Collapsible {
  constructor(link, content) {
    this.link = link;
    this.content = content;
    this.content.classList.toggle("bb-collapsed");
    this.link.addEventListener("click", e => content.classList.toggle("bb-collapsed"));
  }
}

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(".bb-collapsible");
  const contents = document.querySelectorAll(".bb-collapsible-content");

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

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