docs: add accordion example with @alpinejs/collapse

dev/js/bundle.js

@@ -2,9 +2,11 @@ import "lazysizes";
 import Alpine from "alpinejs";
 import focus from "@alpinejs/focus";
 import intersect from "@alpinejs/intersect";
+import collapse from "@alpinejs/collapse";
 
 Alpine.plugin(focus);
 Alpine.plugin(intersect);
+Alpine.plugin(collapse);
 
 window.Alpine = Alpine;
 

index.html

@@ -170,6 +170,30 @@ <h2 class="f3 mt7 mb3">Samples</h2>
                     </div>
                 </article>
 
+                <article
+                    x-data="{
+                        open: false
+                    }"
+                    class="pv5 bt"
+                >
+                    <button
+                        @click="open = !open"
+                        :aria-expanded="open"
+                        aria-controls="accordion"
+                        class="pointer b p0 bg-transparent bn"
+                    >
+                        <span
+                            x-text="open ? '-' : '+'"
+                            aria-hidden="true"
+                        ></span>
+                        Accordion
+                    </button>
+
+                    <p x-cloak x-collapse x-show="open" id="accordion">
+                        Simple Answer for the Accordion.
+                    </p>
+                </article>
+
                 <article class="pv4 bt">
                     <p>
                         All elements scale if desired via the class

package.json

@@ -1,16 +1,17 @@
 {
-  "license" : "GPL-3.0",
-  "dependencies" : {
-    "alpinejs" : "^3.10.3",
-    "tachyons" : "git+ssh:\/\/git@github.com:jenswittmann\/tachyons.git",
-    "postcss-custom-media" : "^10.0.6",
-    "lazysizes" : "^5.3.2",
-    "@alpinejs\/focus" : "^3.10.3",
-    "@alpinejs\/intersect" : "^3.10.3",
-    "cssnano" : "^7.0.1"
+  "license": "GPL-3.0",
+  "dependencies": {
+    "@alpinejs/collapse": "^3.13.10",
+    "@alpinejs/focus": "^3.10.3",
+    "@alpinejs/intersect": "^3.10.3",
+    "alpinejs": "^3.10.3",
+    "cssnano": "^7.0.1",
+    "lazysizes": "^5.3.2",
+    "postcss-custom-media": "^10.0.6",
+    "tachyons": "git+ssh://git@github.com:jenswittmann/tachyons.git"
   },
-  "description" : "Personal framework for more accessibility and sustainability, not just for MODX.",
-  "keywords" : [
+  "description": "Personal framework for more accessibility and sustainability, not just for MODX.",
+  "keywords": [
     "curlyframework",
     "a11y",
     "sustainability",
@@ -26,20 +27,10 @@
     "css grid",
     "leipzig"
   ],
-  "repository" : {
-
-  },
-  "main" : "index.html",
-  "name" : "curlyframework",
-  "devDependencies" : {
-
-  },
-  "version" : "7.0.2",
-  "scripts" : {
-
-  },
-  "author" : "Jens Wittmann",
-  "optionalDependencies" : {
-
-  }
-}
+  "repository": {},
+  "main": "index.html",
+  "name": "curlyframework",
+  "version": "7.0.2",
+  "scripts": {},
+  "author": "Jens Wittmann"
+}