add collapsible

.gitmodules

@@ -1,3 +1,6 @@
 [submodule "themes/hugo-product-launch"]
 	path = themes/hugo-product-launch
 	url = https://github.com/janraasch/hugo-product-launch.git
+[submodule "hugo-universal-collapsible"]
+	path = hugo-universal-collapsible
+	url = git@git.gugelfrei.de:hugo/hugo-universal-collapsible.git

hugo-universal-collapsible

@@ -0,0 +1 @@
+Subproject commit 8051bbbc88d84bf4b91e1e147a20c5b2728291db

layouts/shortcodes/collapse

@@ -0,0 +1 @@
+../../hugo-universal-collapsible/layouts/shortcodes/collapse

layouts/shortcodes/collapse.html

@@ -0,0 +1 @@
+../../hugo-universal-collapsible/layouts/shortcodes/collapse.html

static/css/collapse.css

@@ -0,0 +1,20 @@
+.collapseAnchor {
+  text-decoration:none;
+}
+/* Might want to redo something similar to ensure the arrows look right */
+/*.collapseAnchor:after {
+  content:"\25B2";
+  display:inline-block;
+  padding:0.4em 0 0 0.3em;
+  vertical-align:top;
+  font-size:0.625em;
+}
+.collapseWrap.closed + .collapseAnchor:after {
+  content:"\25BC";
+}
+*/
+.collapseWrap.closed > .hugo-collapse-below {
+  position:absolute;
+  top:-999em;
+  left:-999em;
+}

static/js/collapse.js

@@ -0,0 +1,43 @@
+// Handler will be called when the DOM is fully loaded
+// So the script can be placed anywhere on the page
+var callback = function() {
+  var collapseHooks = document.getElementsByClassName('collapseAfter');
+  for (var hook of collapseHooks) {
+    var wrap = hook.parentNode;
+    var a = document.createElement('a');
+    wrap.append(a);
+    a.addEventListener('click', toggleCollapse, false);
+    a.className = 'collapseAnchor';
+    a.href="#"; /* without this it's not keyboard focusable */
+    wrap.classList.add('collapseWrap');
+    // check/set defaults just to be safe
+    if(!wrap.hasAttribute('data-text-open')) {
+      wrap.setAttribute('data-text-open', 'See Less ▲');
+    }
+    if(!wrap.hasAttribute('data-text-closed')) {
+      wrap.setAttribute('data-text-closed', 'See More ▼');
+    }
+    setName(a, wrap);
+  } // for hook
+  function toggleCollapse(e) {
+    e.preventDefault();
+    currParent = e.currentTarget.parentNode;
+    currParent.classList.toggle('closed');
+    setName(e.currentTarget, currParent);
+  } // toggleCollapse
+};
+
+function setName(el, parent) {
+  if(parent.classList.contains('closed')) {
+    el.text = parent.getAttribute('data-text-closed');
+  } else {
+    el.text = parent.getAttribute('data-text-open');
+  }
+}
+
+if(document.readyState === "complete" ||
+  (document.readyState !== "loading" && !document.documentElement.doScroll)) {
+  callback();
+} else {
+  document.addEventListener("DOMContentLoaded", callback);
+}