weergeef meer events in de eventpagina functie

[J3SS3HVA]

Hier is een code voorbeeld hoe je ervoor kan zorgen dat als je op de weergeef meer knop klikt hij ook alle andere events weergeef.

optie 1

geef alle events een class dat ze er gewoon zijn dus met display block

geef degenen die alleen tevoorschijn komen wanneer je op de knop klikt een class die display none is.

const WeergeefKnop = document.querySelector(".more"); // hier roep je de button aan die meer events weergeeft
const InvisibleEvents = document.querySelector(".Invisible");// hier roep je alle event blokken die standaard er niet zijn. 

WeergeefKnop.addEventListener("click", () => {
    InvisibleEvents.classList.toggle("Visible"); // hier geef je die onzichtbare events de Visible class en ze gaan ook weer weg als je nog een keer erop klikt
    WeergeefKnop.innerText = "Minder events laden"; // veranderd de text in de button
  });

.Visible{
     display: block; /* het is niet aan te raden maar als de event elementen deze class krijgen maar ze zijn nogsteeds onzichtbaar dan kan je tussen block en ; !important zetten */
}

.Invisible{
     display: none:
}

---

Optie 2

const WeergeefKnop = document.querySelector(".more"); // hier roep je de button aan die meer events weergeeft
const InvisibleEvents = document.querySelector(".Invisible");// hier roep je alle event blokken die standaard er niet zijn. 

WeergeefKnop.addEventListener("click", () => {
   if (InvisibleEvents.classList.contains("Invisible")) { // Als hij de class invisible heeft dan krijgt die element de Vissible element en haalt hij de Invissible weg
                element.classList.add("Visible");
                element.classList.remove("Invisible");
                WeergeefKnop.innerText = "Minder events laden"; // veranderd de text in de button
            } else if (InvisibleEvents.classList.contains("Visible")){ // klik je weer op de knop terwijl dat element wel Visible class hebt daan haalt hij het weer weg en brengt hij de Invissible class terug
                element.classList.remove("Visible");
                element.classList.add("Invisible");
                WeergeefKnop.innerText = "Meer events laden"; // veranderd de text in de button
            }
  });

.Visible{
     display: block; 
}

.Invisible{
     display: none:
}