- Elements
- Treeview
Animated
Code-
- style.css
-
- profile-16.jpeg
- background.png
- gallery.jpg
-
-
- file name
- file name
- file name
- file name
- file name
-
- index.html
- components.html
<!-- animated -->
<ul class="font-semibold">
<li class="py-[5px]" x-data="dropdown">
<button type="button" @click="toggle">
<svg :class="{'rotate-180' : !open}" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-primary inline relative -top-1 ltr:mr-2 rtl:ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<polyline points="18 15 12 9 6 15"></polyline>
</svg>
<svg> ... </svg> CSS
</button>
<ul class="ltr:pl-14 rtl:pr-14" x-show="open" x-collapse>
<li class="py-[5px]">
<svg> ... </svg> style.css
</li>
</ul>
</li>
<li class="py-[5px]" x-data="dropdown(true)">
<button type="button" @click="toggle">
<svg :class="{'rotate-180' : !open}" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-primary inline relative -top-1 ltr:mr-2 rtl:ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<polyline points="18 15 12 9 6 15"></polyline>
</svg>
<svg> ... </svg> Images
</button>
<ul class="ltr:pl-14 rtl:pr-14" x-show="open" x-collapse>
<li class="py-[5px]">
<svg> ... </svg> profile-16.jpeg
</li>
<li class="py-[5px]">
<svg> ... </svg> background.png
</li>
<li class="py-[5px]">
<svg> ... </svg> gallery.jpg
</li>
</ul>
</li>
<li class="py-[5px]" x-data="dropdown">
<button type="button" @click="toggle">
<svg :class="{'rotate-180' : !open}" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-primary inline relative -top-1 ltr:mr-2 rtl:ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<polyline points="18 15 12 9 6 15"></polyline>
</svg>
<svg> ... </svg> HTML
</button>
<ul class="ltr:pl-14 rtl:pr-14" x-show="open" x-collapse>
<li class="py-[5px]" x-data="dropdown">
<button type="button" @click="toggle">
<svg :class="{'rotate-180' : !open}" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-primary inline relative -top-1 ltr:mr-2 rtl:ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<polyline points="18 15 12 9 6 15"></polyline>
</svg>
<svg> ... </svg>PAGES
</button>
<ul class="ltr:pl-14 rtl:pr-14" x-show="open" x-collapse>
<li class="py-[5px]">
<svg> ... </svg> file name
</li>
<li class="py-[5px]">
<svg> ... </svg> file name
</li>
<li class="py-[5px]">
<svg> ... </svg> file name
</li>
</ul>
</li>
<li class="py-[5px] ltr:pl-8 rtl:pr-8">
<svg> ... </svg> file name
</li>
<li class="py-[5px] ltr:pl-8 rtl:pr-8">
<svg> ... </svg> file name
</li>
</ul>
</li>
<li class="py-[5px] ltr:pl-7 rtl:pr-7">
<svg> ... </svg> index.html
</li>
<li class="py-[5px] ltr:pl-7 rtl:pr-7">
<svg> ... </svg> components.html
</li>
</ul>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("collapse", () => ({
collapse: false,
collapseSidebar() {
this.collapse = !this.collapse;
},
}));
Alpine.data("dropdown", (initialOpenState = false) => ({
open: initialOpenState,
toggle() {
this.open = !this.open;
},
}));
});
</script>
Basic
Code-
-
-
- style.css
-
- script.js
- index.html
-
<!-- basic -->
<ul class="font-semibold">
<li x-data="dropdown(true)">
<button type="button" @click="toggle">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-primary inline relative -top-1 ltr:mr-2 rtl:ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path x-show="!open" xmlns="http://www.w3.org/2000/svg" d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2zM12 11v6M9 14h6" />
<path x-show="open" xmlns="http://www.w3.org/2000/svg" d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2zM9 14h6" />
</svg>Parent Node
</button>
<ul x-show="open">
<li class="py-[5px] ltr:pl-7 rtl:pr-7" x-data="dropdown">
<button type="button" @click="toggle">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-primary inline relative -top-1 ltr:mr-2 rtl:ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path x-show="!open" xmlns="http://www.w3.org/2000/svg" d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2zM12 11v6M9 14h6" />
<path x-show="open" xmlns="http://www.w3.org/2000/svg" d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2zM9 14h6" />
</svg>img
</button>
<ul x-show="open"></ul>
</li>
<li class="py-[5px] ltr:pl-7 rtl:pr-7" x-data="dropdown">
<button type="button" @click="toggle">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-primary inline relative -top-1 ltr:mr-2 rtl:ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path x-show="!open" xmlns="http://www.w3.org/2000/svg" d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2zM12 11v6M9 14h6" />
<path x-show="open" xmlns="http://www.w3.org/2000/svg" d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2zM9 14h6" />
</svg>css
</button>
<ul x-show="open">
<li class="py-[5px] ltr:pl-7 rtl:pr-7 text-secondary">style.css</li>
</ul>
</li>
<li class="py-[5px] ltr:pl-7 rtl:pr-7" x-data="dropdown">
<button type="button" @click="toggle">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-primary inline relative -top-1 ltr:mr-2 rtl:ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path x-show="!open" xmlns="http://www.w3.org/2000/svg" d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2zM12 11v6M9 14h6" />
<path x-show="open" xmlns="http://www.w3.org/2000/svg" d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2zM9 14h6" />
</svg>js
</button>
<ul x-show="open">
<li class="py-[5px] ltr:pl-7 rtl:pr-7 text-secondary">script.js</li>
</ul>
</li>
<li class="py-[5px] ltr:pl-7 rtl:pr-7 text-secondary">index.html</li>
</ul>
</li>
</ul>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("dropdown", (initialOpenState = false) => ({
open: initialOpenState,
toggle() {
this.open = !this.open;
},
}));
});
</script>
© . Vristo All rights reserved.