<!-- animated -->
<ul class="font-semibold">
<li class="py-[5px]" x-data="dropdown">
<button type="button" @click="toggle">
<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> ... </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> ... </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> ... </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 -->
<ul class="font-semibold">
<li x-data="dropdown(true)">
<button type="button" @click="toggle">
<svg> ... </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> ... </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> ... </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> ... </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>