Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create a Tree View with CSS and JavaScript
On a web page, if you want to represent a folder-view, like in case of web hosting filed, then create a tree view. The root or the home are always clickable in a tree view. We set it clickable using the cursor property with the value pointer. The arrow key is rotated 90 degrees when it is clicked. This is achieved using the rotate() method with the transform property.
Set the tree view root
The root for the tree view is set using the <ul>. Within that, <span> is set −
<ul id="treeUL">
<li>
<span class="rootTree">Root</span>
<!-- set other tree view root and children -->
</li>
</ul>
Style the root of the tree view. The cursor is set to pointer to make the root look like clickable −
.rootTree {
cursor: pointer;
user-select: none;
font-size: 18px;
font-weight: bold;
color: blue;
}
Set the tree view children in the root
The children are set using the <ul> −
<ul class="children"> <li>/bin</li> <li>/etc</li> </ul>
The arrow key for the root
To set the arrow key, use the content property and within that mention the code −
.rootTree::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
Click the root
On clicking the root, it will rotate since the rotate() method is set to 90 degrees −
.rootTree-down::before {
transform: rotate(90deg);
}
Example
To create a tree view with CSS and JavaScript, the code is as follows −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
ul,
#treeUL {
list-style-type: none;
}
#treeUL {
margin: 0;
padding: 0;
}
.rootTree {
cursor: pointer;
user-select: none;
font-size: 18px;
font-weight: bold;
color: blue;
}
li {
font-size: 16px;
color: crimson;
font-weight: 500;
}
.rootTree::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
.rootTree-down::before {
transform: rotate(90deg);
}
.children {
display: none;
}
.active {
display: block;
}
</style>
</head>
<body>
<h1>Tree view example</h1>
<ul id="treeUL">
<li>
<span class="rootTree">Root</span>
<ul class="children">
<li>/bin</li>
<li>/etc</li>
<li>
<span class="rootTree">/home</span>
<ul class="children">
<li>/home/Downloads</li>
<li>/home/Pictures/</li>
<li>
<span class="rootTree">/home/Desktop</span>
<ul class="children">
<li>/home/Desktop/file.txt</li>
<li>/home/Desktop/file1.mp3</li>
<li>/home/Desktop/file1.mp4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
debugger;
console.log('wow');
var toggler = document.querySelectorAll(".rootTree");
Array.from(toggler).forEach(item => {
item.addEventListener("click", () => {
item.parentElement
.querySelector(".children")
.classList.toggle("active");
item.classList.toggle("rootTree-down");
});
});
</script>
</body>
</html>
2K+ Views
