diff --git a/.gitmodules b/.gitmodules
index affc739..482bdd9 100644
--- a/.gitmodules
+++ b/.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
diff --git a/hugo-universal-collapsible b/hugo-universal-collapsible
new file mode 160000
index 0000000..8051bbb
--- /dev/null
+++ b/hugo-universal-collapsible
@@ -0,0 +1 @@
+Subproject commit 8051bbbc88d84bf4b91e1e147a20c5b2728291db
diff --git a/layouts/shortcodes/collapse b/layouts/shortcodes/collapse
new file mode 120000
index 0000000..f795ed1
--- /dev/null
+++ b/layouts/shortcodes/collapse
@@ -0,0 +1 @@
+../../hugo-universal-collapsible/layouts/shortcodes/collapse
\ No newline at end of file
diff --git a/layouts/shortcodes/collapse.html b/layouts/shortcodes/collapse.html
new file mode 120000
index 0000000..ca941d2
--- /dev/null
+++ b/layouts/shortcodes/collapse.html
@@ -0,0 +1 @@
+../../hugo-universal-collapsible/layouts/shortcodes/collapse.html
\ No newline at end of file
diff --git a/static/css/collapse.css b/static/css/collapse.css
new file mode 100644
index 0000000..41440f6
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/static/js/collapse.js b/static/js/collapse.js
new file mode 100644
index 0000000..a875c13
--- /dev/null
+++ b/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);
+}