Home
Indra
Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4

Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4

A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

This tailwind example is contributed by Indra, on 03-Sep-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is collapsible

Breadcrumb Dropdown Other Accordion

Author Indra

485

Fork Fullscreen

triggers.forEach(trigger => {
 trigger.addEventListener('click', () => {
 const content = trigger.nextElementSibling; // div setelah <a>
 if (!content) return;

// toggle show/hide
            if (content.style.display === 'none') {
              content.style.display = ''; // tampil default
            } else {
              content.style.display = 'none'; // sembunyikan
            }

// toggle icon chevron
 const icon = trigger.querySelector('.codicon');
 if (icon) {
 icon.classList.toggle('codicon-chevron-down');
 icon.classList.toggle('codicon-chevron-right');
 }
 });
 });
 });
 </script>
 </div>

Related Examples

Privacy Policy
Privacy Policy

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

1.2k
profile
user profile

Author:
gidy

7 months ago

720
Question & Answer
questions and answers

Author:
Anonymous

2 years ago

8.9k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Anonymous

10 months ago

1.8k
Responsive layout with header, main body, aside (sidebar) and footer

Author:
Ahmed Malik

2 years ago

12.3k
Show user details

Author:
Lucas Martinez

3 years ago

25.4k
Full Page loading overlay

Author:
Bunny

2 years ago

12.3k
profil_eleve.html

Author:
Anonymous

3 months ago

172
Popover
basic popover example

Author:
Dipti narayan

2 years ago

13.1k
Testimonial Section
A responsive, SEO-friendly testimonial section for Ab Nahid Agency clients

Author:
Abdul Jabbar Al Nahid

6 months ago

563
Updated customer details page
Customer details page

Author:
Olivia Smith

1 year ago

3.8k
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

1 year ago

3.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components