Desplegar cajones sin JavaScript

_sass/toggler.scss

@@ -0,0 +1,35 @@
+/*
+ * Desplegar menúes sin javascript!
+ * 
+ * Inspirado en https://dev.to/cydstumpel/creating-a-fold-out-navigation-with-css-only-4g9k
+ */
+
+// Comenzamos con un input checkbox con la clase toggler
+input[type="checkbox"].toggler {
+  // Lo ocultamos pero todavía queremos que se le pueda dar foco con el
+  // teclado
+  opacity: 0;
+  position: absolute;
+
+  // Ocultamos el elemento colapsable
+  & ~ .collapse {
+    z-index: 10;
+    visibility: hidden;
+  }
+
+  // Al tildar el input, mostramos el elemento
+  &:checked ~ .collapse {
+    visibility: visible;
+  }
+
+  & + label {
+    border: none;
+    outline: none;
+    z-index: 11;
+  }
+
+  // Dar una guía visual de que estamos enfocando el input
+  &:focus + label {
+    outline: 1px dotted grey ;
+  }
+}