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.

• Homer Pitt: yes that's clear. i can write this much easier. but then i wouldn't be practising how to use oop javascript ;-)
• konijn: Well in that case, your code is quite good actually, I would just like to see the class name start with an uppercase.
• Homer Pitt: Thank you :-) I haven't quite understood this event handler function yet. As I wrote this, it only works with an action. But what if I have different elements that should trigger different functions? I got this from this article: dev.to/rikschennink/…
• konijn: You should add that link in your question, it would make it a beter question.
• Homer Pitt: i will do that :-)