components
Tailwind CSS Tree View
Use Tree View to navigate hierarchical data, making it perfect for directories, hierarchies, and more. Effortlessly expand, collapse, and select tree nodes.
Class Name | Type | Description |
|---|---|---|
| accordion-treeview-root | Component | Serve as the primary container wrapper. |
| accordion-selectable | Component | wrapper for content |
| accordion-heading | Component | Container class specifically for child elements within accordion-item. |
| accordion-selectable | Component | Container component serving as a wrapper for content, particularly selectable content.. |
| accordion-selected:{tw-utility-class} | Modifier | Modifier applying Tailwind utility styles. |
| tree-view-space | Modifier | Style space and border for sub-menu. |
Example of a basic Tree View to expand and collapse tree view nodes. You can change icon, text as per your needs.
Please note that this component utilizes our Accordion plugin. For more detailed information, please refer Accordion Component for more info.
assets
css
main
main.css
docs.css
README.txt
tailwind
input.css
.gitignore
algolia.css
img
hero.jpg
tailwind.png
untitled.png
js
flyonui.js
scripts
flyonui.js
tailwind.js
www.js
templates
index.html
<!-- Tree Root -->
<div class="accordion-treeview-root" role="tree" aria-orientation="vertical">
<!-- 1st Level Accordion Group -->
<div class="accordion" role="group" data-accordion-always-open>
<!-- 1st Level Accordion -->
<div class="accordion-item active" role="treeitem" aria-expanded="true" id="basic-tree-heading-one">
<!-- 1st Level Accordion Heading -->
<div class="accordion-heading flex w-full items-center gap-x-0.5 py-0.5">
<button class="accordion-toggle btn btn-sm btn-circle btn-text" aria-expanded="true" aria-controls="basic-tree-collapse-one" >
<span class="icon-[tabler--plus] text-base-content/80 accordion-item-active:rotate-45 size-4 transition-all duration-300" ></span>
</button>
<div class="accordion-selectable accordion-selected:bg-base-200/60 grow cursor-pointer rounded-md px-1.5">
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--folder] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">assets</span>
</div>
</div>
</div>
</div>
<!-- End 1st Level Accordion Heading -->
<!-- 1st Level Collapse -->
<div id="basic-tree-collapse-one" class="accordion-content w-full overflow-hidden transition-[height] duration-300" aria-labelledby="basic-tree-heading-one" role="group" >
<!-- 2nd Level Accordion Group -->
<div class="tree-view-space" role="group" data-accordion-always-open>
<!-- 2nd Level Nested Accordion -->
<div class="accordion-item active" role="treeitem" aria-expanded="true" id="basic-tree-sub-heading-one">
<!-- 2nd Level Accordion Heading -->
<div class="accordion-heading flex w-full items-center gap-x-0.5 py-0.5">
<button class="accordion-toggle btn btn-sm btn-circle btn-text" aria-controls="basic-tree-sub-collapse-one" aria-expanded="true" >
<span class="icon-[tabler--plus] text-base-content/80 accordion-item-active:rotate-45 size-4 transition-all duration-300" ></span>
</button>
<div class="accordion-selectable accordion-selected:bg-base-200/90 grow cursor-pointer rounded-md px-1.5">
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--folder] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">css</span>
</div>
</div>
</div>
</div>
<!-- End 2nd Level Accordion Heading -->
<!-- 2nd Level Collapse -->
<div id="basic-tree-sub-collapse-one" class="accordion-content w-full overflow-hidden transition-[height] duration-300" aria-labelledby="basic-tree-sub-heading-one" role="group" >
<!-- 3rd Level Accordion Group -->
<div class="tree-view-space" role="group" data-accordion-always-open>
<!-- 3rd Level Accordion -->
<div class="accordion-item active" role="treeitem" aria-expanded="true" id="basic-tree-sub-level-two-heading-one" >
<!-- 3rd Level Accordion Heading -->
<div class="accordion-heading flex w-full items-center gap-x-0.5 py-0.5">
<button class="accordion-toggle btn btn-sm btn-circle btn-text" aria-expanded="true" aria-controls="basic-tree-sub-level-two-collapse-one" >
<span class="icon-[tabler--plus] text-base-content/80 accordion-item-active:rotate-45 size-4 transition-all duration-300" ></span>
</button>
<div class="accordion-selectable accordion-selected:bg-base-200/90 grow cursor-pointer rounded-md px-1.5" >
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--folder] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">main</span>
</div>
</div>
</div>
</div>
<!-- End 3rd Level Accordion Heading -->
<!-- 3rd Level Collapse -->
<div id="basic-tree-sub-level-two-collapse-one" class="accordion-content w-full overflow-hidden transition-[height] duration-300" aria-labelledby="basic-tree-sub-level-two-heading-one" role="group" >
<div class="tree-view-space">
<!-- 3rd Level Item -->
<div class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2" role="treeitem" >
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--file] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">main.css</span>
</div>
</div>
</div>
<!-- End 3rd Level Item -->
<!-- 3rd Level Item -->
<div class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2" role="treeitem" >
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--file] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">docs.css</span>
</div>
</div>
</div>
<!-- End 3rd Level Item -->
<!-- 3rd Level Item -->
<div class="px-2">
<span class="text-base-content/90">README.txt</span>
</div>
<!-- End 3rd Level Item -->
</div>
</div>
<!-- End 3rd Level Collapse -->
</div>
<!-- End 3rd Level Accordion -->
<!-- 3rd Level Accordion -->
<div class="accordion-item" role="treeitem" aria-expanded="false" id="basic-tree-sub-level-two-heading-two" >
<!-- 3rd Level Accordion Heading -->
<div class="accordion-heading flex w-full items-center gap-x-0.5 py-0.5">
<button class="accordion-toggle btn btn-sm btn-circle btn-text" aria-controls="basic-tree-sub-level-two-collapse-two" aria-expanded="false" >
<span class="icon-[tabler--plus] text-base-content/80 accordion-item-active:rotate-45 size-4 transition-all duration-300" ></span>
</button>
<div class="accordion-selectable accordion-selected:bg-base-200/90 grow cursor-pointer rounded-md px-1.5" >
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--folder] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">tailwind</span>
</div>
</div>
</div>
</div>
<!-- End 3rd Level Accordion Heading -->
<!-- 3rd Level Collapse -->
<div id="basic-tree-sub-level-two-collapse-two" class="accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="basic-tree-sub-level-two-heading-two" role="group" >
<div class="tree-view-space">
<!-- 3rd Level Item -->
<div class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2" role="treeitem" >
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--file] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">input.css</span>
</div>
</div>
</div>
<!-- End 3rd Level Item -->
</div>
</div>
<!-- End 3rd Level Collapse -->
</div>
<!-- End 3rd Level Accordion -->
<!-- 3rd Level Accordion -->
<div class="accordion-item" role="treeitem" aria-expanded="false" id="basic-tree-sub-level-two-heading-three" >
<!-- 3rd Level Heading -->
<div class="px-1.5 py-0.5" role="treeitem">
<span class="text-base-content/90">.gitignore</span>
</div>
<!-- End 3rd Level Heading -->
<!-- 3rd Level Collapse -->
<div id="basic-tree-sub-level-two-collapse-three" class="accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="basic-tree-sub-level-two-heading-three" aria-expanded="false" role="group" >
<div class="tree-view-space">
<!-- 3rd Level Item -->
<div class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2" role="treeitem" >
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--file] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">algolia.css</span>
</div>
</div>
</div>
<!-- End 3rd Level Item -->
</div>
</div>
<!-- End 3rd Level Collapse -->
</div>
<!-- End 3rd Level Accordion -->
</div>
<!-- End 3rd Level Accordion Group -->
</div>
<!-- End 2nd Level Collapse -->
</div>
<!-- End 2nd Level Nested Accordion -->
<!-- 2nd Level Nested Accordion -->
<div class="accordion-item" id="basic-tree-sub-heading-two">
<!-- 2nd Level Accordion Heading -->
<div class="accordion-heading flex w-full items-center gap-x-0.5 py-0.5">
<button class="accordion-toggle btn btn-sm btn-circle btn-text" aria-controls="basic-tree-sub-collapse-two" aria-expanded="false" >
<span class="icon-[tabler--plus] text-base-content/80 accordion-item-active:rotate-45 size-4 transition-all duration-300" ></span>
</button> <div class="accordion-selectable accordion-selected:bg-base-200/90 grow cursor-pointer rounded-md px-1.5">
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--folder] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">img</span>
</div>
</div>
</div>
</div>
<!-- End 2nd Level Accordion Heading -->
<!-- 2nd Level Collapse -->
<div id="basic-tree-sub-collapse-two" class="accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="basic-tree-sub-heading-two" role="group" >
<div class="tree-view-space">
<!-- 2nd Level Item -->
<div class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2" role="treeitem" >
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--photo] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">hero.jpg</span>
</div>
</div>
</div>
<!-- End 2nd Level Item -->
<!-- 2nd Level Item -->
<div class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2" role="treeitem" >
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--photo] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">tailwind.png</span>
</div>
</div>
</div>
<!-- End 2nd Level Item -->
<!-- 2nd Level Item -->
<div class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2" role="treeitem" >
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--photo] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">untitled.png</span>
</div>
</div>
</div>
<!-- End 2nd Level Item -->
</div>
</div>
<!-- End 2nd Level Collapse -->
</div>
<!-- End 2nd Level Nested Accordion -->
<!-- 2nd Level Nested Accordion -->
<div class="accordion-item" role="treeitem" aria-expanded="false" id="basic-tree-sub-heading-three">
<!-- 2nd Level Accordion Heading -->
<div class="accordion-heading flex w-full items-center gap-x-0.5 py-0.5">
<button class="accordion-toggle btn btn-sm btn-circle btn-text" aria-expanded="false" aria-controls="basic-tree-sub-collapse-three" >
<span class="icon-[tabler--plus] text-base-content/80 accordion-item-active:rotate-45 size-4 transition-all duration-300" ></span>
</button>
<div class="accordion-selectable accordion-selected:bg-base-200/90 grow cursor-pointer rounded-md px-1.5">
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--folder] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">js</span>
</div>
</div>
</div>
</div>
<!-- End 2nd Level Accordion Heading -->
<!-- 2nd Level Collapse -->
<div id="basic-tree-sub-collapse-three" class="accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="basic-tree-sub-heading-three" role="group" >
<div class="tree-view-space">
<!-- 2nd Level Item -->
<div class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2" role="treeitem" >
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--photo] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">flyonui.js</span>
</div>
</div>
</div>
<!-- End 2nd Level Item -->
</div>
</div>
<!-- End 2nd Level Collapse -->
</div>
<!-- End 2nd Level Nested Accordion -->
</div>
<!-- 2nd Level Accordion Group -->
</div>
<!-- End 1st Level Collapse -->
</div>
<!-- End 1st Level Accordion -->
<!-- 1st Level Accordion -->
<div class="accordion-item" role="treeitem" aria-expanded="false" id="basic-tree-heading-two">
<!-- 1st Level Accordion Heading -->
<div class="accordion-heading flex w-full items-center gap-x-0.5 py-0.5">
<button class="accordion-toggle btn btn-sm btn-circle btn-text" aria-controls="basic-tree-collapse-two" aria-expanded="false" >
<span class="icon-[tabler--plus] text-base-content/80 accordion-item-active:rotate-45 size-4 transition-all duration-300" ></span>
</button>
<div class="accordion-selectable accordion-selected:bg-base-200/90 grow cursor-pointer rounded-md px-1.5">
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--folder] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">scripts</span>
</div>
</div>
</div>
</div>
<!-- End 1st Level Accordion Heading -->
<!-- 1st Level Collapse -->
<div id="basic-tree-collapse-two" class="accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="basic-tree-heading-two" role="group" >
<div class="tree-view-space">
<!-- 1st Level Item -->
<div class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2" role="treeitem" >
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--file] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">flyonui.js</span>
</div>
</div>
</div>
<!-- End 1st Level Item -->
<!-- 1st Level Item -->
<div class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2" role="treeitem" >
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--file] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">tailwind.js</span>
</div>
</div>
</div>
<!-- End 1st Level Item -->
<!-- 1st Level Item -->
<div class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2" role="treeitem" >
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--file] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">www.js</span>
</div>
</div>
</div>
<!-- End 1st Level Item -->
</div>
</div>
<!-- End 1st Level Collapse -->
</div>
<!-- End 1st Level Accordion -->
<!-- 1st Level Accordion -->
<div class="accordion-item" role="treeitem" aria-expanded="false" id="basic-tree-heading-three">
<!-- 1st Level Accordion Heading -->
<div class="accordion-heading flex w-full items-center gap-x-0.5 py-0.5">
<button class="accordion-toggle btn btn-sm btn-circle btn-text" aria-controls="basic-tree-collapse-three" aria-expanded="false" >
<span class="icon-[tabler--plus] text-base-content/80 accordion-item-active:rotate-45 size-4 transition-all duration-300" ></span>
</button>
<div class="accordion-selectable accordion-selected:bg-base-200/90 grow cursor-pointer rounded-md px-1.5">
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--folder] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">templates</span>
</div>
</div>
</div>
</div>
<!-- End 1st Level Accordion Heading -->
<!-- 1st Level Collapse -->
<div
id="basic-tree-collapse-three"
class="accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
aria-labelledby="basic-tree-heading-three"
role="group"
>
<div class="tree-view-space">
<!-- 1st Level Item -->
<div
class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2"
role="treeitem"
>
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--file] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">index.html</span>
</div>
</div>
</div>
<!-- End 1st Level Item -->
</div>
</div>
<!-- End 1st Level Collapse -->
</div>
<!-- End 1st Level Accordion -->
</div>
<!-- End 1st Level Accordion Group -->
</div>
<!-- End Tree Root -->Remove the data-accordion-always-open attribute to close the currently open element at the group level.
assets
css
main
main.css
docs.css
README.txt
tailwind
input.css
.gitignore
img
hero.jpg
tailwind.png
untitled.png
js
flyonui.js
scripts
flyonui.js
tailwind.js
www.js
templates
index.html
<!-- Tree Root -->
<div class="accordion-treeview-root" role="tree" aria-orientation="vertical">
<!-- 1st Level Accordion Group -->
<div class="accordion" role="group">
<!-- 1st Level Accordion -->
<div class="accordion-item active" role="treeitem" aria-expanded="true" id="cco-tree-heading-one">
<!-- 1st Level Accordion Heading -->
<div class="accordion-heading flex w-full items-center gap-x-0.5 py-0.5">
<button
class="accordion-toggle btn btn-sm btn-circle btn-text"
aria-expanded="true"
aria-controls="cco-tree-collapse-one"
>
<span
class="icon-[tabler--plus] text-base-content/80 accordion-item-active:rotate-45 size-4 transition-all duration-300"
></span>
</button>
<div class="accordion-selectable accordion-selected:bg-base-200/60 grow cursor-pointer rounded-md px-1.5">
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--folder] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">assets</span>
</div>
</div>
</div>
</div>
<!-- End 1st Level Accordion Heading -->
<!-- 1st Level Collapse -->
<div
id="cco-tree-collapse-one"
class="accordion-content w-full overflow-hidden transition-[height] duration-300"
role="group"
aria-labelledby="cco-tree-heading-one"
>
<!-- 2nd Level Accordion Group -->
<div class="accordion tree-view-space">
<!-- 2nd Level Nested Accordion -->
<div class="accordion-item active" role="treeitem" aria-expanded="true" id="cco-tree-sub-heading-one">
<!-- 2nd Level Accordion Heading -->
<div class="accordion-heading flex w-full items-center gap-x-0.5 py-0.5">
<button
class="accordion-toggle btn btn-sm btn-circle btn-text"
aria-expanded="true"
aria-controls="cco-tree-sub-collapse-one"
>
<span
class="icon-[tabler--plus] text-base-content/80 accordion-item-active:rotate-45 size-4 transition-all duration-300"
></span>
</button>
<div class="accordion-selectable accordion-selected:bg-base-200/90 grow cursor-pointer rounded-md px-1.5">
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--folder] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">css</span>
</div>
</div>
</div>
</div>
<!-- End 2nd Level Accordion Heading -->
<!-- 2nd Level Collapse -->
<div
id="cco-tree-sub-collapse-one"
class="accordion-content w-full overflow-hidden transition-[height] duration-300"
role="group"
aria-labelledby="cco-tree-sub-heading-one"
>
<!-- 3rd Level Accordion Group -->
<div class="accordion tree-view-space">
<!-- 3rd Level Accordion -->
<div
class="accordion-item active"
role="treeitem"
aria-expanded="true"
id="cco-tree-sub-level-two-heading-one"
>
<!-- 3rd Level Accordion Heading -->
<div class="accordion-heading flex w-full items-center gap-x-0.5 py-0.5">
<button
class="accordion-toggle btn btn-sm btn-circle btn-text"
aria-expanded="true"
aria-controls="cco-tree-sub-level-two-collapse-one"
>
<span
class="icon-[tabler--plus] text-base-content/80 accordion-item-active:rotate-45 size-4 transition-all duration-300"
></span>
</button>
<div
class="accordion-selectable accordion-selected:bg-base-200/90 grow cursor-pointer rounded-md px-1.5"
>
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--folder] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">main</span>
</div>
</div>
</div>
</div>
<!-- End 3rd Level Accordion Heading -->
<!-- 3rd Level Collapse -->
<div
id="cco-tree-sub-level-two-collapse-one"
class="accordion-content w-full overflow-hidden transition-[height] duration-300"
role="group"
aria-labelledby="cco-tree-sub-level-two-heading-one"
>
<div class="tree-view-space">
<!-- 3rd Level Item -->
<div
class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2"
role="treeitem"
>
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--file] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">main.css</span>
</div>
</div>
</div>
<!-- End 3rd Level Item -->
<!-- 3rd Level Item -->
<div
class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2"
role="treeitem"
>
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--file] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">docs.css</span>
</div>
</div>
</div>
<!-- End 3rd Level Item -->
<!-- 3rd Level Item -->
<div
class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2"
role="treeitem"
>
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--file] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">README.txt</span>
</div>
</div>
</div>
<!-- End 3rd Level Item -->
</div>
</div>
<!-- End 3rd Level Collapse -->
</div>
<!-- End 3rd Level Accordion -->
<!-- 3rd Level Accordion -->
<div
class="accordion-item"
role="treeitem"
aria-expanded="false"
id="cco-tree-sub-level-two-heading-two"
>
<!-- 3rd Level Accordion Heading -->
<div class="accordion-heading flex w-full items-center gap-x-0.5 py-0.5">
<button
class="accordion-toggle btn btn-sm btn-circle btn-text"
aria-expanded="false"
aria-controls="cco-tree-sub-level-two-collapse-two"
>
<span
class="icon-[tabler--plus] text-base-content/80 accordion-item-active:rotate-45 size-4 transition-all duration-300"
></span>
</button>
<div
class="accordion-selectable accordion-selected:bg-base-200/90 grow cursor-pointer rounded-md px-1.5"
>
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--folder] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">tailwind</span>
</div>
</div>
</div>
</div>
<!-- End 3rd Level Accordion Heading -->
<!-- 3rd Level Collapse -->
<div
id="cco-tree-sub-level-two-collapse-two"
class="accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
role="group"
aria-labelledby="cco-tree-sub-level-two-heading-two"
>
<div class="tree-view-space">
<!-- 3rd Level Item -->
<div
class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2"
role="treeitem"
>
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--file] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">input.css</span>
</div>
</div>
</div>
<!-- End 3rd Level Item -->
</div>
</div>
<!-- End 3rd Level Collapse -->
</div>
<!-- End 3rd Level Accordion -->
<!-- 3rd Level Heading -->
<div
class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2"
role="treeitem"
>
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--file] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">.gitignore</span>
</div>
</div>
</div>
<!-- End 3rd Level Heading -->
</div>
<!-- End 3rd Level Accordion Group -->
</div>
<!-- End 2nd Level Collapse -->
</div>
<!-- End 2nd Level Nested Accordion -->
<!-- 2nd Level Nested Accordion -->
<div class="accordion-item" role="treeitem" aria-expanded="false" id="cco-tree-sub-heading-two">
<!-- 2nd Level Accordion Heading -->
<div class="accordion-heading flex w-full items-center gap-x-0.5 py-0.5">
<button
class="accordion-toggle btn btn-sm btn-circle btn-text"
aria-expanded="false"
aria-controls="cco-tree-sub-collapse-two"
>
<span
class="icon-[tabler--plus] text-base-content/80 accordion-item-active:rotate-45 size-4 transition-all duration-300"
></span>
</button>
<div class="accordion-selectable accordion-selected:bg-base-200/90 grow cursor-pointer rounded-md px-1.5">
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--folder] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">img</span>
</div>
</div>
</div>
</div>
<!-- End 2nd Level Accordion Heading -->
<!-- 2nd Level Collapse -->
<div
id="cco-tree-sub-collapse-two"
class="accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
role="group"
aria-labelledby="cco-tree-sub-heading-two"
>
<div class="tree-view-space">
<!-- 2nd Level Item -->
<div
class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2"
role="treeitem"
>
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--photo] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-sm text-gray-800">hero.jpg</span>
</div>
</div>
</div>
<!-- End 2nd Level Item -->
<!-- 2nd Level Item -->
<div
class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2"
role="treeitem"
>
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--photo] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">tailwind.png</span>
</div>
</div>
</div>
<!-- End 2nd Level Item -->
<!-- 2nd Level Item -->
<div
class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2"
role="treeitem"
>
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--photo] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">untitled.png</span>
</div>
</div>
</div>
<!-- End 2nd Level Item -->
</div>
</div>
<!-- End 2nd Level Collapse -->
</div>
<!-- End 2nd Level Nested Accordion -->
<!-- 2nd Level Nested Accordion -->
<div class="accordion-item" role="treeitem" aria-expanded="false" id="cco-tree-sub-heading-three">
<!-- 2nd Level Accordion Heading -->
<div class="accordion-heading flex w-full items-center gap-x-0.5 py-0.5">
<button
class="accordion-toggle btn btn-sm btn-circle btn-text"
aria-expanded="false"
aria-controls="cco-tree-sub-collapse-three"
>
<span
class="icon-[tabler--plus] text-base-content/80 accordion-item-active:rotate-45 size-4 transition-all duration-300"
></span>
</button>
<div class="accordion-selectable accordion-selected:bg-base-200/90 grow cursor-pointer rounded-md px-1.5">
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--folder] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">js</span>
</div>
</div>
</div>
</div>
<!-- End 2nd Level Accordion Heading -->
<!-- 2nd Level Collapse -->
<div
id="cco-tree-sub-collapse-three"
class="accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
role="group"
aria-labelledby="cco-tree-sub-heading-three"
>
<div class="tree-view-space">
<!-- 2nd Level Item -->
<div
class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2"
role="treeitem"
>
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--photo] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">flyonui.js</span>
</div>
</div>
</div>
<!-- End 2nd Level Item -->
</div>
</div>
<!-- End 2nd Level Collapse -->
</div>
<!-- End 2nd Level Nested Accordion -->
</div>
<!-- 2nd Level Accordion Group -->
</div>
<!-- End 1st Level Collapse -->
</div>
<!-- End 1st Level Accordion -->
<!-- 1st Level Accordion -->
<div class="accordion-item" role="treeitem" aria-expanded="false" id="cco-tree-heading-two">
<!-- 1st Level Accordion Heading -->
<div class="accordion-heading flex w-full items-center gap-x-0.5 py-0.5">
<button
class="accordion-toggle btn btn-sm btn-circle btn-text"
aria-expanded="false"
aria-controls="cco-tree-collapse-two"
>
<span
class="icon-[tabler--plus] text-base-content/80 accordion-item-active:rotate-45 size-4 transition-all duration-300"
></span>
</button>
<div class="accordion-selectable accordion-selected:bg-base-200/90 grow cursor-pointer rounded-md px-1.5">
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--folder] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">scripts</span>
</div>
</div>
</div>
</div>
<!-- End 1st Level Accordion Heading -->
<!-- 1st Level Collapse -->
<div
id="cco-tree-collapse-two"
class="accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
role="group"
aria-labelledby="cco-tree-heading-two"
>
<div class="tree-view-space">
<!-- 1st Level Item -->
<div
class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2"
role="treeitem"
>
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--file] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">flyonui.js</span>
</div>
</div>
</div>
<!-- End 1st Level Item -->
<!-- 1st Level Item -->
<div
class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2"
role="treeitem"
>
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--file] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">tailwind.js</span>
</div>
</div>
</div>
<!-- End 1st Level Item -->
<!-- 1st Level Item -->
<div
class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2"
role="treeitem"
>
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--file] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">www.js</span>
</div>
</div>
</div>
<!-- End 1st Level Item -->
</div>
</div>
<!-- End 1st Level Collapse -->
</div>
<!-- End 1st Level Accordion -->
<!-- 1st Level Accordion -->
<div class="accordion-item" role="treeitem" aria-expanded="false" id="cco-tree-heading-three">
<!-- 1st Level Accordion Heading -->
<div class="accordion-heading flex w-full items-center gap-x-0.5 py-0.5">
<button
class="accordion-toggle btn btn-sm btn-circle btn-text"
aria-expanded="false"
aria-controls="cco-tree-collapse-three"
>
<span
class="icon-[tabler--plus] text-base-content/80 accordion-item-active:rotate-45 size-4 transition-all duration-300"
></span>
</button>
<div class="accordion-selectable accordion-selected:bg-base-200/90 grow cursor-pointer rounded-md px-1.5">
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--folder] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">templates</span>
</div>
</div>
</div>
</div>
<!-- End 1st Level Accordion Heading -->
<!-- 1st Level Collapse -->
<div
id="cco-tree-collapse-three"
class="accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
role="group"
aria-labelledby="cco-tree-heading-three"
>
<div class="tree-view-space">
<!-- 1st Level Item -->
<div
class="accordion-selectable accordion-selected:bg-base-200/90 cursor-pointer rounded-md px-2"
role="treeitem"
>
<div class="flex items-center gap-x-3">
<span class="icon-[tabler--file] text-base-content/90 size-4 flex-shrink-0"></span>
<div class="grow">
<span class="text-base-content/90">index.html</span>
</div>
</div>
</div>
<!-- End 1st Level Item -->
</div>
</div>
<!-- End 1st Level Collapse -->
</div>
<!-- End 1st Level Accordion -->
</div>
<!-- End 1st Level Accordion Group -->
</div>
<!-- End Tree Root -->
Please refer to the Accordion component documentation for JavaScript behavior in components, which is also applicable to tree-view since both Accordion and tree-view utilize the accordion plugin.
