From 99730a05234ef7e15f9b60b4ae3ceec64eb61f5a Mon Sep 17 00:00:00 2001
From: David Hill <david.esmale@gmail.com>
Date: Thu, 10 Apr 2025 07:28:59 -0400
Subject: [PATCH] Adding a new Accordion controller/component

---
 index.html                                |  60 +++++-
 package-lock.json                         | 222 ++++++++++++----------
 package.json                              |   2 +-
 src/accordion.js                          |  86 +++++++++
 src/index.js                              |   1 +
 test/accordion_test.js                    |  81 ++++++++
 test/fixtures/accordion.html              |  31 +++
 test/fixtures/accordion_nonexclusive.html |  32 ++++
 test/modal_test.js                        |   2 -
 9 files changed, 411 insertions(+), 106 deletions(-)
 create mode 100644 src/accordion.js
 create mode 100644 test/accordion_test.js
 create mode 100644 test/fixtures/accordion.html
 create mode 100644 test/fixtures/accordion_nonexclusive.html

diff --git a/index.html b/index.html
index 8b9b9a9..78f3a73 100644
--- a/index.html
+++ b/index.html
@@ -17,10 +17,11 @@
 
     <script type="module">
       import { Application } from "@hotwired/stimulus";
-      import { Alert, ColorPreview, Dropdown, Modal, Popover, Slideover, Tabs, Toggle } from "tailwindcss-stimulus-components";
+      import { Accordion, Alert, ColorPreview, Dropdown, Modal, Popover, Slideover, Tabs, Toggle } from "tailwindcss-stimulus-components";
 
       (() => {
         const application = Application.start();
+        application.register('accordion', Accordion);
         application.register('alert', Alert);
         application.register('color-preview', ColorPreview);
         application.register('dropdown', Dropdown);
@@ -68,6 +69,63 @@ <h1 class="text-3xl font-semibold mb-2">Tailwind Stimulus Components Examples</h
       <a href="https://github.com/excid3/tailwindcss-stimulus-components" target="_blank" class="text-blue-500">View on Github</a>
       <p class="my-4">To view examples locally, run <code class="bg-gray-300 text-sm px-2 py-1 rounded">npm install && npm run build && npx serve</code> and then open <code class="bg-gray-300 text-sm px-2 py-1 rounded">localhost:3000</code> in your browser.</p>
 
+      <div class="my-12">
+        <h2 class="text-2xl text-gray-800 font-semibold mb-4">Accordion</h2>
+
+        <!-- Accordion -->
+        <div data-controller="accordion"
+             class='flex flex-col gap-0.5 max-w-75 border border-gray-400 rounded-lg'>
+          <div data-index='0' data-action='click->accordion#toggle' data-accordion-target='button'
+               class='flex justify-between items-center cursor-pointer w-full items-center gap-3 rounded-lg px-2 py-4 text-left text-base/6 font-medium text-zinc-950 sm:py-2 sm:text-sm/5'
+          >
+            <span>Button 1</span>
+            <span data-accordion-target='chevron' class='w-4 h-4 transition-transform'>
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+              </svg>
+            </span>
+          </div>
+          <div data-accordion-target='panel' class='pl-4 overflow-hidden h-0'>
+            <div class="p-4">
+              This is the first accordion panel.
+            </div>
+          </div>
+
+          <div data-index='1' data-action='click->accordion#toggle' data-accordion-target='button'
+               class='flex justify-between items-center cursor-pointer w-full items-center gap-3 rounded-lg px-2 py-4 text-left text-base/6 font-medium text-zinc-950 sm:py-2 sm:text-sm/5'
+          >
+            <span>Button 2</span>
+            <span data-accordion-target='chevron' class='w-4 h-4 transition-transform'>
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+              </svg>
+            </span>
+          </div>
+          <div data-accordion-target='panel' class='pl-4 overflow-hidden h-0'>
+            <div class="p-4">
+              This is the second accordion panel.
+            </div>
+          </div>
+
+          <div data-index='2' data-action='click->accordion#toggle' data-accordion-target='button'
+               class='flex justify-between items-center cursor-pointer w-full items-center gap-3 rounded-lg px-2 py-4 text-left text-base/6 font-medium text-zinc-950 sm:py-2 sm:text-sm/5'
+          >
+            <span>Button 3</span>
+            <span data-accordion-target='chevron' class='w-4 h-4 transition-transform'>
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+              </svg>
+            </span>
+          </div>
+          <div data-accordion-target='panel' class='pl-4 overflow-hidden h-0'>
+            <div class="p-4">
+              This is the third accordion panel.
+            </div>
+          </div>
+
+        </div>
+      </div>
+
       <div class="my-12">
         <h2 class="text-2xl text-gray-800 font-semibold mb-4">Alerts</h2>
 
diff --git a/package-lock.json b/package-lock.json
index e59d747..c2269b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,18 @@
 {
   "name": "tailwindcss-stimulus-components",
-  "version": "6.0.2",
+  "version": "6.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "tailwindcss-stimulus-components",
-      "version": "6.0.2",
+      "version": "6.2.0",
       "license": "MIT",
       "devDependencies": {
         "@open-wc/testing": "^4.0.0",
         "@web/test-runner": "^0.18.0",
         "@web/test-runner-commands": "^0.9.0",
-        "esbuild": "^0.23.0"
+        "esbuild": "^0.24.0"
       },
       "peerDependencies": {
         "@hotwired/stimulus": ">= 3.0.0"
@@ -77,9 +77,9 @@
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.23.1.tgz",
-      "integrity": "sha512-6VhYk1diRqrhBAqpJEdjASR/+WVRtfjpqKuNw11cLiaWpAT/Uu+nokB+UJnevzy/P9C/ty6AOe0dwueMrGh/iQ==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.2.tgz",
+      "integrity": "sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA==",
       "cpu": [
         "ppc64"
       ],
@@ -94,9 +94,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.23.1.tgz",
-      "integrity": "sha512-uz6/tEy2IFm9RYOyvKl88zdzZfwEfKZmnX9Cj1BHjeSGNuGLuMD1kR8y5bteYmwqKm1tj8m4cb/aKEorr6fHWQ==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.2.tgz",
+      "integrity": "sha512-tmwl4hJkCfNHwFB3nBa8z1Uy3ypZpxqxfTQOcHX+xRByyYgunVbZ9MzUUfb0RxaHIMnbHagwAxuTL+tnNM+1/Q==",
       "cpu": [
         "arm"
       ],
@@ -111,9 +111,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.23.1.tgz",
-      "integrity": "sha512-xw50ipykXcLstLeWH7WRdQuysJqejuAGPd30vd1i5zSyKK3WE+ijzHmLKxdiCMtH1pHz78rOg0BKSYOSB/2Khw==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.2.tgz",
+      "integrity": "sha512-cNLgeqCqV8WxfcTIOeL4OAtSmL8JjcN6m09XIgro1Wi7cF4t/THaWEa7eL5CMoMBdjoHOTh/vwTO/o2TRXIyzg==",
       "cpu": [
         "arm64"
       ],
@@ -128,9 +128,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.23.1.tgz",
-      "integrity": "sha512-nlN9B69St9BwUoB+jkyU090bru8L0NA3yFvAd7k8dNsVH8bi9a8cUAUSEcEEgTp2z3dbEDGJGfP6VUnkQnlReg==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.2.tgz",
+      "integrity": "sha512-B6Q0YQDqMx9D7rvIcsXfmJfvUYLoP722bgfBlO5cGvNVb5V/+Y7nhBE3mHV9OpxBf4eAS2S68KZztiPaWq4XYw==",
       "cpu": [
         "x64"
       ],
@@ -145,9 +145,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.23.1.tgz",
-      "integrity": "sha512-YsS2e3Wtgnw7Wq53XXBLcV6JhRsEq8hkfg91ESVadIrzr9wO6jJDMZnCQbHm1Guc5t/CdDiFSSfWP58FNuvT3Q==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.2.tgz",
+      "integrity": "sha512-kj3AnYWc+CekmZnS5IPu9D+HWtUI49hbnyqk0FLEJDbzCIQt7hg7ucF1SQAilhtYpIujfaHr6O0UHlzzSPdOeA==",
       "cpu": [
         "arm64"
       ],
@@ -162,9 +162,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.23.1.tgz",
-      "integrity": "sha512-aClqdgTDVPSEGgoCS8QDG37Gu8yc9lTHNAQlsztQ6ENetKEO//b8y31MMu2ZaPbn4kVsIABzVLXYLhCGekGDqw==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.2.tgz",
+      "integrity": "sha512-WeSrmwwHaPkNR5H3yYfowhZcbriGqooyu3zI/3GGpF8AyUdsrrP0X6KumITGA9WOyiJavnGZUwPGvxvwfWPHIA==",
       "cpu": [
         "x64"
       ],
@@ -179,9 +179,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.23.1.tgz",
-      "integrity": "sha512-h1k6yS8/pN/NHlMl5+v4XPfikhJulk4G+tKGFIOwURBSFzE8bixw1ebjluLOjfwtLqY0kewfjLSrO6tN2MgIhA==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.2.tgz",
+      "integrity": "sha512-UN8HXjtJ0k/Mj6a9+5u6+2eZ2ERD7Edt1Q9IZiB5UZAIdPnVKDoG7mdTVGhHJIeEml60JteamR3qhsr1r8gXvg==",
       "cpu": [
         "arm64"
       ],
@@ -196,9 +196,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.23.1.tgz",
-      "integrity": "sha512-lK1eJeyk1ZX8UklqFd/3A60UuZ/6UVfGT2LuGo3Wp4/z7eRTRYY+0xOu2kpClP+vMTi9wKOfXi2vjUpO1Ro76g==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.2.tgz",
+      "integrity": "sha512-TvW7wE/89PYW+IevEJXZ5sF6gJRDY/14hyIGFXdIucxCsbRmLUcjseQu1SyTko+2idmCw94TgyaEZi9HUSOe3Q==",
       "cpu": [
         "x64"
       ],
@@ -213,9 +213,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.23.1.tgz",
-      "integrity": "sha512-CXXkzgn+dXAPs3WBwE+Kvnrf4WECwBdfjfeYHpMeVxWE0EceB6vhWGShs6wi0IYEqMSIzdOF1XjQ/Mkm5d7ZdQ==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.2.tgz",
+      "integrity": "sha512-n0WRM/gWIdU29J57hJyUdIsk0WarGd6To0s+Y+LwvlC55wt+GT/OgkwoXCXvIue1i1sSNWblHEig00GBWiJgfA==",
       "cpu": [
         "arm"
       ],
@@ -230,9 +230,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.23.1.tgz",
-      "integrity": "sha512-/93bf2yxencYDnItMYV/v116zff6UyTjo4EtEQjUBeGiVpMmffDNUyD9UN2zV+V3LRV3/on4xdZ26NKzn6754g==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.2.tgz",
+      "integrity": "sha512-7HnAD6074BW43YvvUmE/35Id9/NB7BeX5EoNkK9obndmZBUk8xmJJeU7DwmUeN7tkysslb2eSl6CTrYz6oEMQg==",
       "cpu": [
         "arm64"
       ],
@@ -247,9 +247,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.23.1.tgz",
-      "integrity": "sha512-VTN4EuOHwXEkXzX5nTvVY4s7E/Krz7COC8xkftbbKRYAl96vPiUssGkeMELQMOnLOJ8k3BY1+ZY52tttZnHcXQ==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.2.tgz",
+      "integrity": "sha512-sfv0tGPQhcZOgTKO3oBE9xpHuUqguHvSo4jl+wjnKwFpapx+vUDcawbwPNuBIAYdRAvIDBfZVvXprIj3HA+Ugw==",
       "cpu": [
         "ia32"
       ],
@@ -264,9 +264,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.23.1.tgz",
-      "integrity": "sha512-Vx09LzEoBa5zDnieH8LSMRToj7ir/Jeq0Gu6qJ/1GcBq9GkfoEAoXvLiW1U9J1qE/Y/Oyaq33w5p2ZWrNNHNEw==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.2.tgz",
+      "integrity": "sha512-CN9AZr8kEndGooS35ntToZLTQLHEjtVB5n7dl8ZcTZMonJ7CCfStrYhrzF97eAecqVbVJ7APOEe18RPI4KLhwQ==",
       "cpu": [
         "loong64"
       ],
@@ -281,9 +281,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.23.1.tgz",
-      "integrity": "sha512-nrFzzMQ7W4WRLNUOU5dlWAqa6yVeI0P78WKGUo7lg2HShq/yx+UYkeNSE0SSfSure0SqgnsxPvmAUu/vu0E+3Q==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.2.tgz",
+      "integrity": "sha512-iMkk7qr/wl3exJATwkISxI7kTcmHKE+BlymIAbHO8xanq/TjHaaVThFF6ipWzPHryoFsesNQJPE/3wFJw4+huw==",
       "cpu": [
         "mips64el"
       ],
@@ -298,9 +298,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.23.1.tgz",
-      "integrity": "sha512-dKN8fgVqd0vUIjxuJI6P/9SSSe/mB9rvA98CSH2sJnlZ/OCZWO1DJvxj8jvKTfYUdGfcq2dDxoKaC6bHuTlgcw==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.2.tgz",
+      "integrity": "sha512-shsVrgCZ57Vr2L8mm39kO5PPIb+843FStGt7sGGoqiiWYconSxwTiuswC1VJZLCjNiMLAMh34jg4VSEQb+iEbw==",
       "cpu": [
         "ppc64"
       ],
@@ -315,9 +315,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.23.1.tgz",
-      "integrity": "sha512-5AV4Pzp80fhHL83JM6LoA6pTQVWgB1HovMBsLQ9OZWLDqVY8MVobBXNSmAJi//Csh6tcY7e7Lny2Hg1tElMjIA==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.2.tgz",
+      "integrity": "sha512-4eSFWnU9Hhd68fW16GD0TINewo1L6dRrB+oLNNbYyMUAeOD2yCK5KXGK1GH4qD/kT+bTEXjsyTCiJGHPZ3eM9Q==",
       "cpu": [
         "riscv64"
       ],
@@ -332,9 +332,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.23.1.tgz",
-      "integrity": "sha512-9ygs73tuFCe6f6m/Tb+9LtYxWR4c9yg7zjt2cYkjDbDpV/xVn+68cQxMXCjUpYwEkze2RcU/rMnfIXNRFmSoDw==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.2.tgz",
+      "integrity": "sha512-S0Bh0A53b0YHL2XEXC20bHLuGMOhFDO6GN4b3YjRLK//Ep3ql3erpNcPlEFed93hsQAjAQDNsvcK+hV90FubSw==",
       "cpu": [
         "s390x"
       ],
@@ -349,9 +349,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.23.1.tgz",
-      "integrity": "sha512-EV6+ovTsEXCPAp58g2dD68LxoP/wK5pRvgy0J/HxPGB009omFPv3Yet0HiaqvrIrgPTBuC6wCH1LTOY91EO5hQ==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.2.tgz",
+      "integrity": "sha512-8Qi4nQcCTbLnK9WoMjdC9NiTG6/E38RNICU6sUNqK0QFxCYgoARqVqxdFmWkdonVsvGqWhmm7MO0jyTqLqwj0Q==",
       "cpu": [
         "x64"
       ],
@@ -365,10 +365,27 @@
         "node": ">=18"
       }
     },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.24.2.tgz",
+      "integrity": "sha512-wuLK/VztRRpMt9zyHSazyCVdCXlpHkKm34WUyinD2lzK07FAHTq0KQvZZlXikNWkDGoT6x3TD51jKQ7gMVpopw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.23.1.tgz",
-      "integrity": "sha512-aevEkCNu7KlPRpYLjwmdcuNz6bDFiE7Z8XC4CPqExjTvrHugh28QzUXVOZtiYghciKUacNktqxdpymplil1beA==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.2.tgz",
+      "integrity": "sha512-VefFaQUc4FMmJuAxmIHgUmfNiLXY438XrL4GDNV1Y1H/RW3qow68xTwjZKfj/+Plp9NANmzbH5R40Meudu8mmw==",
       "cpu": [
         "x64"
       ],
@@ -383,9 +400,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.23.1.tgz",
-      "integrity": "sha512-3x37szhLexNA4bXhLrCC/LImN/YtWis6WXr1VESlfVtVeoFJBRINPJ3f0a/6LV8zpikqoUg4hyXw0sFBt5Cr+Q==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.2.tgz",
+      "integrity": "sha512-YQbi46SBct6iKnszhSvdluqDmxCJA+Pu280Av9WICNwQmMxV7nLRHZfjQzwbPs3jeWnuAhE9Jy0NrnJ12Oz+0A==",
       "cpu": [
         "arm64"
       ],
@@ -400,9 +417,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.23.1.tgz",
-      "integrity": "sha512-aY2gMmKmPhxfU+0EdnN+XNtGbjfQgwZj43k8G3fyrDM/UdZww6xrWxmDkuz2eCZchqVeABjV5BpildOrUbBTqA==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.2.tgz",
+      "integrity": "sha512-+iDS6zpNM6EnJyWv0bMGLWSWeXGN/HTaF/LXHXHwejGsVi+ooqDfMCCTerNFxEkM3wYVcExkeGXNqshc9iMaOA==",
       "cpu": [
         "x64"
       ],
@@ -417,9 +434,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.23.1.tgz",
-      "integrity": "sha512-RBRT2gqEl0IKQABT4XTj78tpk9v7ehp+mazn2HbUeZl1YMdaGAQqhapjGTCe7uw7y0frDi4gS0uHzhvpFuI1sA==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.2.tgz",
+      "integrity": "sha512-hTdsW27jcktEvpwNHJU4ZwWFGkz2zRJUz8pvddmXPtXDzVKTTINmlmga3ZzwcuMpUvLw7JkLy9QLKyGpD2Yxig==",
       "cpu": [
         "x64"
       ],
@@ -434,9 +451,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.23.1.tgz",
-      "integrity": "sha512-4O+gPR5rEBe2FpKOVyiJ7wNDPA8nGzDuJ6gN4okSA1gEOYZ67N8JPk58tkWtdtPeLz7lBnY6I5L3jdsr3S+A6A==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.2.tgz",
+      "integrity": "sha512-LihEQ2BBKVFLOC9ZItT9iFprsE9tqjDjnbulhHoFxYQtQfai7qfluVODIYxt1PgdoyQkz23+01rzwNwYfutxUQ==",
       "cpu": [
         "arm64"
       ],
@@ -451,9 +468,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.23.1.tgz",
-      "integrity": "sha512-BcaL0Vn6QwCwre3Y717nVHZbAa4UBEigzFm6VdsVdT/MbZ38xoj1X9HPkZhbmaBGUD1W8vxAfffbDe8bA6AKnQ==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.2.tgz",
+      "integrity": "sha512-q+iGUwfs8tncmFC9pcnD5IvRHAzmbwQ3GPS5/ceCyHdjXubwQWI12MKWSNSMYLJMq23/IUCvJMS76PDqXe1fxA==",
       "cpu": [
         "ia32"
       ],
@@ -468,9 +485,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.23.1.tgz",
-      "integrity": "sha512-BHpFFeslkWrXWyUPnbKm+xYYVYruCinGcftSBaa8zoF9hZO4BcSCFUvHVTtzpIY6YzUnYtuEhZ+C9iEXjxnasg==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.2.tgz",
+      "integrity": "sha512-7VTgWzgMGvup6aSqDPLiW5zHaxYJGTO4OokMjIlrCtf+VpEL+cXKtCvg723iguPYI5oaUNdS+/V7OU2gvXVWEg==",
       "cpu": [
         "x64"
       ],
@@ -2440,9 +2457,9 @@
       "dev": true
     },
     "node_modules/esbuild": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.23.1.tgz",
-      "integrity": "sha512-VVNz/9Sa0bs5SELtn3f7qhJCDPCF5oMEl5cO9/SSinpE9hbPVvxbd572HH5AKiP7WD8INO53GgfDDhRjkylHEg==",
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.2.tgz",
+      "integrity": "sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -2453,30 +2470,31 @@
         "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.23.1",
-        "@esbuild/android-arm": "0.23.1",
-        "@esbuild/android-arm64": "0.23.1",
-        "@esbuild/android-x64": "0.23.1",
-        "@esbuild/darwin-arm64": "0.23.1",
-        "@esbuild/darwin-x64": "0.23.1",
-        "@esbuild/freebsd-arm64": "0.23.1",
-        "@esbuild/freebsd-x64": "0.23.1",
-        "@esbuild/linux-arm": "0.23.1",
-        "@esbuild/linux-arm64": "0.23.1",
-        "@esbuild/linux-ia32": "0.23.1",
-        "@esbuild/linux-loong64": "0.23.1",
-        "@esbuild/linux-mips64el": "0.23.1",
-        "@esbuild/linux-ppc64": "0.23.1",
-        "@esbuild/linux-riscv64": "0.23.1",
-        "@esbuild/linux-s390x": "0.23.1",
-        "@esbuild/linux-x64": "0.23.1",
-        "@esbuild/netbsd-x64": "0.23.1",
-        "@esbuild/openbsd-arm64": "0.23.1",
-        "@esbuild/openbsd-x64": "0.23.1",
-        "@esbuild/sunos-x64": "0.23.1",
-        "@esbuild/win32-arm64": "0.23.1",
-        "@esbuild/win32-ia32": "0.23.1",
-        "@esbuild/win32-x64": "0.23.1"
+        "@esbuild/aix-ppc64": "0.24.2",
+        "@esbuild/android-arm": "0.24.2",
+        "@esbuild/android-arm64": "0.24.2",
+        "@esbuild/android-x64": "0.24.2",
+        "@esbuild/darwin-arm64": "0.24.2",
+        "@esbuild/darwin-x64": "0.24.2",
+        "@esbuild/freebsd-arm64": "0.24.2",
+        "@esbuild/freebsd-x64": "0.24.2",
+        "@esbuild/linux-arm": "0.24.2",
+        "@esbuild/linux-arm64": "0.24.2",
+        "@esbuild/linux-ia32": "0.24.2",
+        "@esbuild/linux-loong64": "0.24.2",
+        "@esbuild/linux-mips64el": "0.24.2",
+        "@esbuild/linux-ppc64": "0.24.2",
+        "@esbuild/linux-riscv64": "0.24.2",
+        "@esbuild/linux-s390x": "0.24.2",
+        "@esbuild/linux-x64": "0.24.2",
+        "@esbuild/netbsd-arm64": "0.24.2",
+        "@esbuild/netbsd-x64": "0.24.2",
+        "@esbuild/openbsd-arm64": "0.24.2",
+        "@esbuild/openbsd-x64": "0.24.2",
+        "@esbuild/sunos-x64": "0.24.2",
+        "@esbuild/win32-arm64": "0.24.2",
+        "@esbuild/win32-ia32": "0.24.2",
+        "@esbuild/win32-x64": "0.24.2"
       }
     },
     "node_modules/escalade": {
diff --git a/package.json b/package.json
index fdbed47..514f6ac 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-stimulus-components",
-  "version": "6.1.3",
+  "version": "6.2.0",
   "description": "A set of Stimulus components (tabs, dropdowns, modals, toggles, autosave, etc) for TailwindCSS users",
   "source": "./src/index.js",
   "main": "./dist/tailwindcss-stimulus-components.cjs",
diff --git a/src/accordion.js b/src/accordion.js
new file mode 100644
index 0000000..ade2e5a
--- /dev/null
+++ b/src/accordion.js
@@ -0,0 +1,86 @@
+// TODO: Configuration options for:
+//   - transformation duration
+
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["button", "chevron", "panel"]
+  static values = {
+    exclusiveOpen: { type: Boolean, default: true },
+    transformationClass: { type: String, default: "rotate-90" } // other options: scale-x-[-1], scale-y-[-1] rotate-180
+  }
+
+  connect() {
+    // Close all panels when the controller is connected
+    this.buttonTargets.forEach(button => {
+      const index = button.dataset.index
+      const panel = this.panelTargets[index]
+      const chevron = this.chevronTargets[index]
+
+      // Store the panel height as a data attribute only if it's not already stored
+      if (!panel.dataset.height) {
+        const height = panel.scrollHeight + "px";
+        panel.dataset.height = height; // Save the height in a data attribute
+      }
+
+      this.close(panel, chevron)
+    })
+  }
+
+  toggle(event) {
+    const index = event.currentTarget.dataset.index
+    const targetPanel = this.panelTargets[index]
+    const targetChevron = this.chevronTargets[index]
+
+    if (this.exclusiveOpenValue) {
+      // Close all panels except the one clicked
+      this.buttonTargets.forEach(button => {
+        const index = button.dataset.index
+        const panel = this.panelTargets[index]
+        const chevron = this.chevronTargets[index]
+
+        if (panel !== targetPanel) {
+          this.close(panel, chevron)
+        }
+      })
+    }
+
+    // Toggle the clicked panel open/close
+    if (targetPanel.style.height === '0px' || !targetPanel.style.height) {
+      this.open(targetPanel, targetChevron)
+    } else {
+      this.close(targetPanel, targetChevron)
+    }
+  }
+
+  open(panel, chevron) {
+    // Get the stored height from the data attribute
+    const height = panel.dataset.height;
+
+    // Set the height to 0px initially (collapsed state)
+    panel.style.height = '0px';
+
+    // Trigger reflow to ensure the panel is collapsed properly
+    panel.offsetHeight; // Force reflow
+
+    // Set the height transition and expand the panel to the stored height
+    panel.style.transition = 'height 0.25s ease-in-out';
+    panel.style.height = height; // Use the stored height to expand
+
+    if (chevron !== undefined && chevron !== null) {
+      // Rotate the chevron
+      chevron.classList.add('transform', this.transformationClassValue)
+    }
+  }
+
+  close(panel, chevron) {
+    // Set the transition to collapse the panel
+    panel.style.transition = 'height 0.25s ease-in-out'
+    panel.style.height = '0px'  // Collapse the panel
+
+    if (chevron !== undefined && chevron !== null) {
+      // Rotate the chevron back
+      chevron.classList.remove(this.transformationClassValue)
+    }
+  }
+}
diff --git a/src/index.js b/src/index.js
index 7ff70f1..ac6e92f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,4 @@
+export { default as Accordion } from './accordion.js'
 export { default as Alert } from './alert.js'
 export { default as Autosave } from './autosave.js'
 export { default as ColorPreview } from './color_preview.js'
diff --git a/test/accordion_test.js b/test/accordion_test.js
new file mode 100644
index 0000000..9c7a1d3
--- /dev/null
+++ b/test/accordion_test.js
@@ -0,0 +1,81 @@
+import { fixture, expect, nextFrame } from '@open-wc/testing'
+import { fetchFixture } from './test_helpers'
+
+import { Application } from '@hotwired/stimulus'
+import Accordion from '../src/accordion'
+
+describe('AccordionController', () => {
+  let application
+
+  describe('default behavior', () => {
+    beforeEach(async () => {
+      const html = await fetchFixture('accordion.html')
+      await fixture(html)
+      application = Application.start()
+      application.register('accordion', Accordion)
+    })
+
+    afterEach(() => {
+      if (application) {
+        application.stop()
+        application = null
+      }
+    })
+
+    it('clicks to open the accordion panels', async () => {
+      const button1 = document.getElementById('button1')
+      const button2 = document.getElementById('button2')
+      const panel1 = document.getElementById('panel1')
+      const panel2 = document.getElementById('panel2')
+
+      expect(panel1.style.height).to.equal('0px')
+      expect(panel2.style.height).to.equal('0px')
+
+      button1.click()
+      expect(panel1.style.height).to.equal(panel1.dataset.height)
+      expect(panel2.style.height).to.equal('0px')
+
+      button2.click()
+      expect(panel1.style.height).to.equal('0px')
+      expect(panel2.style.height).to.equal(panel2.dataset.height)
+    })
+  })
+
+  describe('disable exclusiveOpen', () => {
+    beforeEach(async() => {
+      const html = await fetchFixture('accordion_nonexclusive.html')
+      await fixture(html)
+      application = Application.start()
+      application.register('accordion', Accordion)
+    })
+
+    afterEach(() => {
+      if (application) {
+        application.stop()
+        application = null
+      }
+    })
+
+    it('allows multiple panels to be open simultaneously', () => {
+      const button1 = document.getElementById('button1')
+      const button2 = document.getElementById('button2')
+      const panel1 = document.getElementById('panel1')
+      const panel2 = document.getElementById('panel2')
+
+      expect(panel1.style.height).to.equal('0px')
+      expect(panel2.style.height).to.equal('0px')
+
+      button1.click()
+      expect(panel1.style.height).to.equal(panel1.dataset.height)
+      expect(panel2.style.height).to.equal('0px')
+
+      button2.click()
+      expect(panel1.style.height).to.equal(panel1.dataset.height)
+      expect(panel2.style.height).to.equal(panel2.dataset.height)
+
+      button2.click()
+      expect(panel1.style.height).to.equal(panel1.dataset.height)
+      expect(panel2.style.height).to.equal('0px')
+    })
+  })
+})
diff --git a/test/fixtures/accordion.html b/test/fixtures/accordion.html
new file mode 100644
index 0000000..4bfd1bd
--- /dev/null
+++ b/test/fixtures/accordion.html
@@ -0,0 +1,31 @@
+<div id='accordion' data-controller="accordion" class='flex flex-col gap-0.5 max-w-75 border border-gray-400 rounded-lg'>
+  <div data-index='0' data-action='click->accordion#toggle' data-accordion-target='button' id='button1'
+       class='flex justify-between items-center cursor-pointer w-full items-center gap-3 rounded-lg px-2 py-4 text-left'>
+    <span>Button Text</span>
+    <span data-accordion-target='chevron' class='w-4 h-4 transition-transform'>
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+      </svg>
+    </span>
+  </div>
+  <div data-accordion-target='panel' class='pl-4 overflow-hidden h-0' id='panel1'>
+    <div class="p-4">
+      This is the first accordion panel.
+    </div>
+  </div>
+
+  <div data-index='1' data-action='click->accordion#toggle' data-accordion-target='button' id='button2'
+       class='flex justify-between items-center cursor-pointer w-full items-center gap-3 rounded-lg px-2 py-4 text-left'>
+    <span>Button Text #2</span>
+    <span data-accordion-target='chevron' class='w-4 h-4 transition-transform'>
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+      </svg>
+    </span>
+  </div>
+  <div data-accordion-target='panel' class='pl-4 overflow-hidden h-0' id='panel2'>
+    <div class="p-4">
+      And this is the second accordion panel.
+    </div>
+  </div>
+</div>
diff --git a/test/fixtures/accordion_nonexclusive.html b/test/fixtures/accordion_nonexclusive.html
new file mode 100644
index 0000000..57927c9
--- /dev/null
+++ b/test/fixtures/accordion_nonexclusive.html
@@ -0,0 +1,32 @@
+<div id='accordion' data-controller='accordion' data-accordion-exclusive-open-value='false'
+     class='flex flex-col gap-0.5 max-w-75 border border-gray-400 rounded-lg'>
+  <div data-index='0' data-action='click->accordion#toggle' data-accordion-target='button' id='button1'
+       class='flex justify-between items-center cursor-pointer w-full items-center gap-3 rounded-lg px-2 py-4 text-left'>
+    <span>Button Text</span>
+    <span data-accordion-target='chevron' class='w-4 h-4 transition-transform'>
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+      </svg>
+    </span>
+  </div>
+  <div data-accordion-target='panel' class='pl-4 overflow-hidden h-0' id='panel1'>
+    <div class="p-4">
+      This is the first accordion panel.
+    </div>
+  </div>
+
+  <div data-index='1' data-action='click->accordion#toggle' data-accordion-target='button' id='button2'
+       class='flex justify-between items-center cursor-pointer w-full items-center gap-3 rounded-lg px-2 py-4 text-left'>
+    <span>Button Text #2</span>
+    <span data-accordion-target='chevron' class='w-4 h-4 transition-transform'>
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+      </svg>
+    </span>
+  </div>
+  <div data-accordion-target='panel' class='pl-4 overflow-hidden h-0' id='panel2'>
+    <div class="p-4">
+      And this is the second accordion panel.
+    </div>
+  </div>
+</div>
diff --git a/test/modal_test.js b/test/modal_test.js
index 3f81e4b..c927449 100644
--- a/test/modal_test.js
+++ b/test/modal_test.js
@@ -14,8 +14,6 @@ describe('ModalController', () => {
       application.register('modal', Modal)
     })
 
-    const openModalButton = document.querySelector("[data-action='modal#open']")
-
     it('clicks to open and close the modal', async () => {
       const dialog = document.querySelector("dialog")
       const openModalButton = document.querySelector("[data-action='modal#open']")