diff --git a/src/collapse/index.html b/src/collapse/index.html
new file mode 100644
index 0000000..140c567
--- /dev/null
+++ b/src/collapse/index.html
@@ -0,0 +1,19 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="./index.scss" />
+  </head>
+  <body>
+    <p>Here's some content before</p>
+
+    <div class="collapse-wrapper">
+      <label for="collapse">Check</label>
+      <input type="checkbox" id="collapse" />
+      <div class="collapse-content">
+        This is the inner content
+      </div>
+    </div>
+
+
+    <p>Text below the collapse, which should move out the way</p>
+  </body>
+</html>
diff --git a/src/collapse/index.scss b/src/collapse/index.scss
new file mode 100644
index 0000000..7f261fc
--- /dev/null
+++ b/src/collapse/index.scss
@@ -0,0 +1,28 @@
+@import "normalize.css";
+
+.collapse-wrapper {
+  background: red;
+
+  .collapse-content {
+    padding: 5px;
+    overflow: hidden;
+
+  }
+
+  label {
+    cursor: pointer;
+    width: 100%;
+    display: block;
+    background-color: orange;
+    padding: 5px;
+    user-select: none;
+  }
+
+  input[type="checkbox"] {
+    display: none;
+  }
+
+  input[type="checkbox"]:not(:checked) + .collapse-content {
+    display: none;
+  }
+}
