Article Categories

Selected Reading

How to create a tree view with CSS and JavaScript?

CSS Web Development Front End Technology

A tree view is an expandable/collapsible hierarchical structure commonly used to display folder structures or nested data. This interface allows users to click on parent nodes to reveal or hide their children, creating an interactive navigation experience.

Syntax

/* Basic tree view structure */
.tree-root {
    cursor: pointer;
    user-select: none;
}

.tree-root::before {
    content: "\25B6"; /* Right arrow */
    transform: rotate(0deg);
    transition: transform 0.3s;
}

.tree-root.expanded::before {
    transform: rotate(90deg); /* Down arrow when expanded */
}

.tree-children {
    display: none;
}

.tree-children.active {
    display: block;
}

Key Components

Tree Structure

The tree view uses nested <ul> and <li> elements with clickable spans for parent nodes −

<ul class="tree">
   <li>
      <span class="tree-root">Parent Node</span>
      <ul class="tree-children">
         <li>Child 1</li>
         <li>Child 2</li>
      </ul>
   </li>
</ul>

Arrow Indicators

CSS pseudo-elements create expandable arrows that rotate when clicked −

.tree-root::before {
   content: "\25B6"; /* Unicode right arrow */
   display: inline-block;
   margin-right: 8px;
   transition: transform 0.3s ease;
}

.tree-root.expanded::before {
   transform: rotate(90deg);
}

Complete Example

Here's a fully functional tree view with CSS styling and JavaScript interaction −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: Arial, sans-serif;
        padding: 20px;
    }
    
    .tree {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    .tree li {
        margin: 4px 0;
        font-size: 16px;
        color: #333;
    }
    
    .tree-root {
        cursor: pointer;
        user-select: none;
        font-weight: bold;
        color: #0066cc;
        padding: 4px 0;
    }
    
    .tree-root:hover {
        background-color: #f0f8ff;
        border-radius: 4px;
        padding: 4px 8px;
    }
    
    .tree-root::before {
        content: "\25B6";
        color: #666;
        display: inline-block;
        margin-right: 8px;
        transition: transform 0.3s ease;
    }
    
    .tree-root.expanded::before {
        transform: rotate(90deg);
    }
    
    .tree-children {
        display: none;
        margin-left: 20px;
        padding-left: 10px;
        border-left: 1px dashed #ccc;
    }
    
    .tree-children.active {
        display: block;
    }
    
    .tree-children li {
        color: #666;
        font-weight: normal;
    }
</style>
</head>
<body>
    <h2>File System Tree View</h2>
    
    <ul class="tree">
        <li>
            <span class="tree-root">Documents</span>
            <ul class="tree-children">
                <li>report.pdf</li>
                <li>notes.txt</li>
                <li>
                    <span class="tree-root">Projects</span>
                    <ul class="tree-children">
                        <li>website.html</li>
                        <li>styles.css</li>
                        <li>
                            <span class="tree-root">Images</span>
                            <ul class="tree-children">
                                <li>logo.png</li>
                                <li>banner.jpg</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <span class="tree-root">Downloads</span>
            <ul class="tree-children">
                <li>software.zip</li>
                <li>music.mp3</li>
            </ul>
        </li>
    </ul>

    <script>
        // Add click event listeners to all tree root elements
        const treeRoots = document.querySelectorAll('.tree-root');
        
        treeRoots.forEach(root => {
            root.addEventListener('click', function() {
                // Find the children container
                const children = this.parentElement.querySelector('.tree-children');
                
                if (children) {
                    // Toggle visibility
                    children.classList.toggle('active');
                    // Toggle arrow rotation
                    this.classList.toggle('expanded');
                }
            });
        });
    </script>
</body>
</html>

An interactive tree view appears with "Documents" and "Downloads" as main folders. Clicking on any folder toggles its expansion, showing/hiding child items with smooth arrow rotation. The interface includes hover effects and visual hierarchy with indented child elements.

Key Features

Feature	Implementation
Expandable Nodes	CSS classes toggle display property
Visual Indicators	Unicode arrows with CSS transforms
Hover Effects	Background color changes on hover
Smooth Animation	CSS transitions for arrow rotation

Conclusion

Creating a tree view combines CSS for styling and visual effects with JavaScript for interactivity. The key is using CSS classes to toggle visibility and transforms for smooth animations, making the interface intuitive and responsive.

AmitDiwan

Updated on: 2026-03-15T14:58:47+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next