Cara Membuat Tree View Pada Sebuah Website

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti February 23, 2021

Di bawah ini kita akan mepelajari cara membuat tampilan hierarki dengan CSS dan JavaScript.

Tree View

Tampilan hierarki akan mewakili tampilan informasi hierarki, di mana setiap item dapat memiliki sejumlah subitem, seperti contoh di bawah ini :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul, #myUL {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;
}

.caret {
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}

.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.caret-down::before {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */'
  transform: rotate(90deg);  
}

.nested {
  display: none;
}

.active {
  display: block;
}
</style>
</head>
<body>

<h2>Tree View</h2>
<p>Tampilan hierarki merepresentasikan tampilan informasi hierarkis, di mana setiap item dapat memiliki sejumlah subitem. </p>
<p> Klik pada panah untuk membuka atau menutup tree view.</p>

<ul id="myUL">
  <li><span class="caret">Menu</span>
    <ul class="nested">
      <li>Nasi Putih</li>
      <li>Nasi Goreng</li>
      <li><span class="caret">Minuman</span>
        <ul class="nested">
          <li>Teh Tawar</li>
          <li>Air Mineral</li>
          <li><span class="caret">Teh Manis</span>
            <ul class="nested">
              <li>Panas</li>
              <li>Dingin</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<script>
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");
  });
}
</script>

</body>
</html>

Membuat Tree View

Langkah 1) Tambahkan HTML:
Contoh

<ul id="myUL">
  <li><span class="caret">Menu</span>
    <ul class="nested">
      <li>Nasi Putih</li>
      <li>Nasi Goreng</li>
      <li><span class="caret">Minuman</span>
        <ul class="nested">
          <li>Teh Tawar</li>
          <li>Air Mineral</li>
          <li><span class="caret">Teh Manis</span>
            <ul class="nested">
              <li>Panas</li>
              <li>Dingin</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Langkah 2) Tambahkan CSS:
Contoh

/* Hapus bullets secara default */
ul, #myUL {
  list-style-type: none;
}

/* Hapus margin dan padding dari ul */
#myUL {
  margin: 0;
  padding: 0;
}

/* Style untuk caret/arrow */
.caret {
  cursor: pointer;
  user-select: none; /* Mencegah pemilihan teks */
}

/* Buat tanda sisipan / panah dengan unicode dan beri style */
.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

/* Putar ikon tanda sisipan / panah saat diklik (menggunakan JavaScript) */
.caret-down::before {
  transform: rotate(90deg);
}

/* Sembunyikan list bertingkat */
.nested {
  display: none;
}

/* Tampilkan list bersarang ketika pengguna mengklik tanda sisipan / panah (dengan JavaScript) */
.active {
  display: block;
}

Langkah 3) Tambahkan JavaScript:
Contoh

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");
  });
}