{% extends 'components/layouts/default.html' %} {% load static %} {% block content %}
<!-- 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>