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

Code is based off a previous tutorial - get the "django-forms-dynamic" branch from this repository:

📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
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:

▶️ Full Playlist:

𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:

📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:

#django #alpinejs #python

[serkangulten]

thank you for this video. can next tutorial be datatable with htmx :)

[TomislavMiletic]

Thank you! Can this accordion have links in the sidebar and load the content in a div, in the main section? So when you click the link, new object content is loaded in the main section from some partial, and that link receives a current css value.

[seanalehx]

Thank you sir. That was really helpful