Django, HTMX and Alpine.js - Building an Accordion component

In this video, we'll build a simple accordion component, using Django, HTMX and Alpine.js We'll see how to load content with HTMX, and control which cards are shown in our accordion using Alpine.js. Code is based off a previous tutorial - get the "django-forms-dynamic" branch from this repository: https://github.com/bugbytes-io/django-htmx-chained-dropdown 📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀: 00:00 Intro 00:31 Setup 01:02 Adding Alpine to project 03:28 Adding HTMX attributes to button 06:02 Building the accordion 07:28 Adding related modules to cards 08:53 Using prefetch_related method to avoid N+1 problem 10:04 Creating Alpine component 13:10 Showing multiple cards 18:22 Conditionally rendering icons ☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲: To support the channel and encourage new videos, please consider buying me a coffee here: https://ko-fi.com/bugbytes ▶️ Full Playlist: https://www.youtube.com/playlist?list=PL-2EBeDYMIbQTx0h0EQfw3BXjqRQTiX_c 𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮: 📖 Blog: https://www.bugbytes.io/posts/ 👾 Github: https://github.com/bugbytes-io/django-htmx-chained-dropdown 🐦 Twitter: https://twitter.com/bugbytesio 📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻: Install Alpine: https://alpinejs.dev/essentials/installation HTML Unicode Icons: https://www.htmlsymbols.xyz/unicode #django #alpinejs #python