Hoe te maken: Boomweergave

Leer hoe je een boomweergave maakt met CSS en JavaScript.

Boomweergave

Een boomweergave is een hiërarchische weergave van informatie, waarbij elk item meerdere subitems kan hebben.

Klik op de pijl om de tak van het boomdiagram te openen of te sluiten.

  • Drankjes
    • Water
    • Koffie
    • Thee
      • Zwarte thee
      • Witte thee
      • Groene thee
        • Sencha
        • Gyokuro
        • Matcha
        • Pi Lo Chun

Try it yourself

Boomweergave

Stap 1 - Voeg HTML toe:

<ul id="myUL">
  <li><span class="caret">Beverages</span>
    <ul class="nested">
      <li>Water</li>
      <li>Coffee</li>
      <li><span class="caret">Tea</span>
        <ul class="nested">
          <li>Black Tea</li>
          <li>White Tea</li>
          <li><span class="caret">Green Tea</span>
            <ul class="nested">
              <li>Sencha</li>
              <li>Gyokuro</li>
              <li>Matcha</li>
              <li>Pi Lo Chun</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Tweede stap - Voeg CSS toe:

/* Verwijder de standaard lijstpunten */
ul, #myUL {
  list-style-type: none;
}
/* Verwijder de marges en paden van de ouder ul */
#myUL {
  margin: 0;
  padding: 0;
}
/* Stel de stijl van het caret/pijl in */
.caret {
  cursor: pointer;
  user-select: none; /* Voorkom tekstselectie */
}
/* Maak gebruik van unicode om het caret/pijl te maken en stel de stijl in */
.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}
/* Roteer het caret/pijl pictogram wanneer op het pictogram wordt geklikt (gebruik JavaScript) */
.caret-down::before {
  transform: rotate(90deg);
}
/* Verberg de geneste lijst */
.nested {
  display: none;
}
/* Toon de geneste lijst (gebruik JavaScript) wanneer de gebruiker op het caret/pijl klikt */
.active {
  display: block;
}

Derde stap - Voeg JavaScript toe:

var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}

Try it yourself

Selectieboomweergave

In this example, we use a 'ballot box' unicode instead of caret:

Example

Try it yourself