1 files changed, 14 insertions, 15 deletions
diff --git a/static/js/section-folds.js b/static/js/section-folds.js
index 9440264..5933d9b 100644
--- a/static/js/section-folds.js
+++ b/static/js/section-folds.js
@@ -18,15 +18,15 @@
  */
 
 function handleFolds() {
-    function displayFold(fold, foldText, frontMatterText) {
-        foldText.innerHTML = `⬇️ ${frontMatterText}`;
-        fold.classList.remove("fold-hidden");
+    function hideFold(fold, foldButton, frontMatterText) {
+        foldButton.innerHTML = `↓ Show More`;
+        fold.classList.remove("expanded");
         
     }
 
-    function hideFold(fold, foldText, frontMatterText) {
-        foldText.innerHTML = `➡️ Folded ${frontMatterText}`;
-        fold.classList.add("fold-hidden");
+    function displayFold(fold, foldButton, frontMatterText) {
+        foldButton.innerHTML = `↑ Show Less`;
+        fold.classList.add("expanded");
     }
 
     let folds = document.querySelectorAll(".section-fold");
@@ -37,25 +37,24 @@ function handleFolds() {
         let frontMatterText = `Section on "${fold.dataset.name}"`;
         let foldFrontMatter = document.createElement("div");
 
-        // The text will be inside of an anchor, which we'll hook onto using an
+        // The toggle will be a button, which we'll hook onto using an
         // event listener.
-        let foldAnchor = document.createElement("a");
-        let foldText = document.createElement("p");
-        foldAnchor.appendChild(foldText);
-        fold.parentNode.insertBefore(foldAnchor, fold.nextSibling);
+        let foldButton = document.createElement("button");
+        foldButton.classList.add("fold-toggle");
+        fold.parentNode.insertBefore(foldButton, fold.nextSibling);
 
         // The fold will start off in the "hidden" state.
         let toggle = false;
-        hideFold(fold, foldText, frontMatterText);
+        hideFold(fold, foldButton, frontMatterText);
 
         // But clicking on the "front matter" will cause the state of the fold
         // to toggle, first to "visible", and then back to "hidden".
-        foldAnchor.addEventListener('click', () => {
+        foldButton.addEventListener('click', () => {
             toggle = !toggle;
             if (toggle) {
-                displayFold(fold, foldText, frontMatterText);
+                displayFold(fold, foldButton, frontMatterText);
             } else {
-                hideFold(fold, foldText, frontMatterText);
+                hideFold(fold, foldButton, frontMatterText);
             }
         });
     }