make accordeon ccs-only

src/components/accordion.js

@@ -1,19 +1,19 @@
-import React, { useState } from "react"
+import React from "react"
 import accordionStyles from "./accordion.module.css"
 
-export default ({ title, initial, children }) => {
+export default ({ title, children }) => {
-  const [open, setOpen] = useState(initial)
-
   return (
-    <>
+    <div>
-      <div
+      <input
-        className={accordionStyles.header}
+        hidden={true}
-        onClick={() => setOpen(open => !open)}
+        type="checkbox"
-      >
+        id={`tab-${title}`}
-        <span>{title}</span>
+        name={`tab-${title}`}
-        <span>{open ? "∨" : "∧"}</span>
+      />
-      </div>
+      <label htmlFor={`tab-${title}`} className={accordionStyles.header}>
-      {open ? <div className={accordionStyles.content}>{children}</div> : null}
+        {title}
-    </>
+      </label>
+      <div className={accordionStyles.content}>{children}</div>
+    </div>
   )
 }

src/components/accordion.module.css

@@ -7,7 +7,21 @@
   justify-content: space-between;
 }
 
+label:after {
+  content: "∨";
+  right: 1em;
+}
+
+input:checked + label:after {
+  content: "∧";
+}
+
 .content {
   margin-bottom: 1.5em;
   padding: 0 2em;
+  display: none;
+}
+
+input:checked ~ .content {
+  display: block;
 }