Add textClosed, textOpen parameters

README.md

@@ -25,6 +25,8 @@ If one of the sections (`above`/`below`) contains HTML (e.g. from another shortc
 | Name           | Accepted values     | Default      | Description |
 | ----           | ---                 | ---          | ---         |
 | `initState`    | `closed`, `open`    | `closed`     | The initial state of the collapsible |
+| `textClosed`   | Unicode string     | See More ▼     | The text to display when the collapsible is closed |
+| `textOpen`     | Unicode string     | See Less ▲     | The text to display when the collapsible is open |
 
 # Demo
 
@@ -51,7 +53,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
 ![demo](demo/demo.gif)
 
-Credit for JS/CSS:
+Credit for initial JS/CSS implementation:
 
-Jason Knight
+Jason Knight at https://levelup.gitconnected.com/collapsible-sections-with-or-without-javascript-3fd871955a9d
-https://levelup.gitconnected.com/collapsible-sections-with-or-without-javascript-3fd871955a9d

layouts/collapse.html

@@ -4,7 +4,10 @@
   {{ errorf "Failed to handle page %q: param \"initState\" only takes [open, closed]; got %s" .Page.Path (.Get "init")}}
 {{ end }}
 
-<div class="hugo-collapse-parent {{ if eq (default "closed" (.Get "initState")) "closed" }}closed{{ end }}">
+<div class="hugo-collapse-parent
+  {{ if eq (default "closed" (.Get "initState")) "closed" }}closed{{ end }}"
+  data-text-closed={{ (default "See More ▼" (.Get "textClosed")) }}
+  data-text-open={{ (default "See Less ▲" (.Get "textOpen")) }}>
   <!-- prevent common resources from being loaded more than once per page -->
   {{ if not ($.Page.Scratch.Get "collapseLoaded") }}
     {{ $.Page.Scratch.Set "collapseLoaded" 1 }}

static/css/collapse.css

@@ -1,13 +1,8 @@
 .collapseAnchor {
   text-decoration:none;
 }
-.collapseAnchor:before {
+/* Might want to redo something similar to ensure the arrows look right */
-  content:"See Less";
+/*.collapseAnchor:after {
-}
-.collapseWrap.closed + .collapseAnchor:before {
-  content:"See More";
-}
-.collapseAnchor:after {
   content:"\25B2";
   display:inline-block;
   padding:0.4em 0 0 0.3em;
@@ -17,7 +12,8 @@
 .collapseWrap.closed + .collapseAnchor:after {
   content:"\25BC";
 }
-.collapseWrap.closed > .collapseAfter ~ * {
+*/
+.collapseWrap.closed > .hugo-collapse-below {
   position:absolute;
   top:-999em;
   left:-999em;

static/js/collapse.js

@@ -3,23 +3,38 @@
 var callback = function() {
   var collapseHooks = document.getElementsByClassName('collapseAfter');
   for (var hook of collapseHooks) {
-    var
+    var wrap = hook.parentNode;
-      wrap = hook.parentNode,
+    var a = document.createElement('a');
-      a = wrap.parentNode.insertBefore(
+    wrap.append(a);
-        document.createElement('a'),
-        wrap.nextSibling
-      );
     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();
-    e.currentTarget.previousElementSibling.classList.toggle('closed');
+    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();