How to Make Collapsible TreeView use CSS

Apa karena namanya tree jadi mirip seperti sebuah pohon! Tapi kalau di telaah, mungkin karena fiturnya yang turun-temurun, maka tree di sini memiliki arti sesuatu yg mirip pohon karena keturunan :D Saya hanya mau mengupdate artikel cara membuat collapsible TreeView menggunakan 100% kode CSS. Postingan serupa patut di tengok terlebih dahulu sebelum melangkah ke session berikut ;)

1. Make line tree navigation pure use css.
2. Make treevew menu without javascript.

Mirip dengan nomor 2 sepertinya TreeView menu yg sekarang! Karena murni pakai kode CSS and tanpa image tentunya.
DEMO

• Title 1
  • Daftar Isi
  • Sub Menu
    • Post Entry
    • Member Entry
  • Inspirasi
  • Creativity
  • Typography
• Title 2
  • Portfolio
  • Project
  • Contact

Silahkan ambil bumbu CSS collapsible TreeView di restoran terdekat :P

.treeview {
float: left;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.treeview ul {
list-style: none;
padding-left: 1em;
}
.treeview ul li span:hover {
color: #d00;
}
.treeview input {
display: none;
}
.treeview input:checked ~ ul {
display: none;
}
.treeview input ~ label {
cursor: pointer;
}
.treeview input ~ label:before {
content: '';
width: 0;
height: 0;
position: absolute;
margin-left: -1em;
margin-top: 0.4em;
border-width: 4px;
border-style: solid;
border-top-color: transparent;
border-right-color: green;
border-bottom-color: green;
border-left-color: transparent;
}
.treeview input:checked ~ label:before {
margin-left: -0.8em;
border-width: 5px;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: red;
}

Markup HTML

<div class="treeview hover">
  <ul>
    <li>
      <input type="checkbox" id="cb-1&quot;>
      <label for="cb-1">
        <span>Title 1</span>
      </label>
      <ul>
        <li><span>Daftar Isi</span></li>
        <li>
          <input type="checkbox" id="cb-1-2">
          <label for="cb-1-2">
            <span>Sub Menu</span>
          </label>
          <ul>
            <li><span>Post Entry</span></li>
            <li><span>Member Entry</span></li>
          </ul>
        </li>
        <li><span>Inspirasi</span></li>
        <li><span>Creativity</span></li>
        <li><span>Typography</span></li>
      </ul>
    </li>
    <li>
      <input type="checkbox" id="cb-2">
      <label for="cb-2">
        <span>Title 2</span>
      </label>
      <ul>
        <li><span>Portfolio</span></li>
        <li><span>Project</span></li>
        <li><span>Contact</span></li>
      </ul>
    </li>
  </ul>
</div>

Perhatikan secara baik-baik penulisan syntax variabel ul & li. Khusus input type dan label, unik ID harus berbeda dengan sebelumnya, tetapi harus sama dengan type input & label. Jika pemakain unik ID ada yg sama, maka tidak akan jalan alias bentrok :-"
Source by: codepen.io/galaxija737/full/bKrEL
Happy coding \m/