How to create treeview through css & js

CSS alone cannot do that, there may be a lot of childs, who are not going to write a CSS child selector for N elements, are you? For this reason JavaScript is used to create a loop for those N elements, and to attach a visual representation (or a class to each of those elements). This way, the first element is parent then later ones are simply files or child folders and so on.

There are many libraries already provided online, Google for treeview jquery[^]. You will get more than 20 plugins to chose from. jsTree[^] is one of them.

For N elements a loop has to made with ul and li
$("#dataTree").append($("

• Tree View
  • Tree

"))

Code For the above tree view

$("#dataTree").append($("<ul><li><a>Tree View</a><ul><li><a href="#">Tree</a></li></ul></li></ul>")

where

Datatree is a div. In this way n elements can be added to it. This is without any plugin