From 57504cd6106f64338be4fccd3e53ecfbb6d62d72 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Mon, 12 Aug 2024 22:32:05 +0100
Subject: [PATCH] Add code collapse

---
 src/code-collapse/index.html | 20 ++++++++++++++++++++
 src/code-collapse/index.scss | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 src/code-collapse/index.html
 create mode 100644 src/code-collapse/index.scss
diff --git a/src/code-collapse/index.html b/src/code-collapse/index.html
new file mode 100644
index 0000000..d31eae4
--- /dev/null
+++ b/src/code-collapse/index.html
@@ -0,0 +1,20 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="./index.scss" />
+  </head>
+  <body>
+    <p>Here's some content before</p>
+
+    <div class="code-collapse-wrapper">
+      <input type="checkbox" id="collapse" />
+      <label class="open-tag" for="collapse" aria-label="tag">&lt;tag</label>
+      <div class="collapse-content">
+        This is the inner content
+      </div>
+      <label for="collapse" class="close-tag">&lt;/tag&gt;</div>
+    </div>
+
+
+    <p>Text below the collapse, which should move out the way</p>
+  </body>
+</html>
diff --git a/src/code-collapse/index.scss b/src/code-collapse/index.scss
new file mode 100644
index 0000000..bf68a48
--- /dev/null
+++ b/src/code-collapse/index.scss
@@ -0,0 +1,34 @@
+@import "normalize.css";
+
+.code-collapse-wrapper {
+  .collapse-content {
+    margin: 0.5rem;
+    overflow: hidden;
+
+  }
+
+  label {
+    cursor: pointer;
+    width: 100%;
+    display: block;
+    user-select: none;
+
+    &.open-tag::after {
+      content: ">";
+    }
+  }
+
+  input[type="checkbox"] {
+    display: none;
+  }
+
+  input[type="checkbox"]:not(:checked) {
+    ~ .collapse-content, ~ .close-tag {
+      display: none;
+    }
+
+    ~ label.open-tag::after {
+      content: "/>";
+    }
+  }
+}
