diff --git a/README.md b/README.md
index 5b0ed45..16531ae 100644
--- a/README.md
+++ b/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
-https://levelup.gitconnected.com/collapsible-sections-with-or-without-javascript-3fd871955a9d
+Jason Knight at https://levelup.gitconnected.com/collapsible-sections-with-or-without-javascript-3fd871955a9d
diff --git a/layouts/collapse.html b/layouts/collapse.html
index e05d7e4..53f736b 100644
--- a/layouts/collapse.html
+++ b/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 }}
-
+
{{ if not ($.Page.Scratch.Get "collapseLoaded") }}
{{ $.Page.Scratch.Set "collapseLoaded" 1 }}
diff --git a/static/css/collapse.css b/static/css/collapse.css
index 4d63b35..41440f6 100644
--- a/static/css/collapse.css
+++ b/static/css/collapse.css
@@ -1,13 +1,8 @@
.collapseAnchor {
text-decoration:none;
}
-.collapseAnchor:before {
- content:"See Less";
-}
-.collapseWrap.closed + .collapseAnchor:before {
- content:"See More";
-}
-.collapseAnchor:after {
+/* 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;
@@ -17,7 +12,8 @@
.collapseWrap.closed + .collapseAnchor:after {
content:"\25BC";
}
-.collapseWrap.closed > .collapseAfter ~ * {
+*/
+.collapseWrap.closed > .hugo-collapse-below {
position:absolute;
top:-999em;
left:-999em;
diff --git a/static/js/collapse.js b/static/js/collapse.js
index 0d3a097..a875c13 100644
--- a/static/js/collapse.js
+++ b/static/js/collapse.js
@@ -3,23 +3,38 @@
var callback = function() {
var collapseHooks = document.getElementsByClassName('collapseAfter');
for (var hook of collapseHooks) {
- var
- wrap = hook.parentNode,
- a = wrap.parentNode.insertBefore(
- document.createElement('a'),
- wrap.nextSibling
- );
+ 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();
- 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();