Implement single bottom bar collapse toggle for better UX

Replace separate "Show more/Show less" toggle links with integrated clickable bar at bottom of code cells. Maintains dynamic height control while providing more intuitive expand/collapse interaction.

Co-authored-by: mmcky <8263752+mmcky@users.noreply.github.com>

Author: Copilot

src/quantecon_book_theme/assets/scripts/index.js

@@ -258,34 +258,35 @@ document.addEventListener("DOMContentLoaded", function () {
     collapsableCodeBlocks[i].classList.forEach((el) => {
       collapseAccToHeight(el, collapsableCodeBlocksH);
     });
-    const toggleContainer = document.createElement("div");
-    toggleContainer.innerHTML =
-      '<a href="#" class="toggle toggle-less" style="display:none;"><span class="icon icon-angle-double-up"></span><em>Show less...</em></a><a href="#" class="toggle toggle-more"><span class="icon icon-angle-double-down"></span><em>Show more...</em></a>';
+    const toggleBar = document.createElement("div");
+    toggleBar.className = "collapse-toggle-bar";
+    toggleBar.innerHTML =
+      '<span class="collapse-indicator">Click to expand code</span>';
     collapsableCodeBlocksH.parentNode.insertBefore(
-      toggleContainer,
+      toggleBar,
       collapsableCodeBlocksH.nextSibling,
     );
   }
 
   const collapsableCodeToggles = document.querySelectorAll(
-    "div[class^='cell tag_collapse'] .toggle",
+    "div[class^='cell tag_collapse'] .collapse-toggle-bar",
   );
   for (var i = 0; i < collapsableCodeToggles.length; i++) {
     collapsableCodeToggles[i].addEventListener("click", function (e) {
       e.preventDefault();
       var codeBlock = this.closest('div[class^="cell tag_collapse"]');
       codeBlockH = codeBlock.querySelector(".highlight");
+      var indicator = this.querySelector(".collapse-indicator");
+      
       if (codeBlock.classList.contains("expanded")) {
         codeBlock.classList.remove("expanded");
-        this.style.display = "none";
-        this.nextSibling.style.display = "block";
+        indicator.textContent = "Click to expand code";
         codeBlock.classList.forEach((el) => {
           collapseAccToHeight(el, codeBlockH);
         });
       } else {
         codeBlock.classList.add("expanded");
-        this.style.display = "none";
-        this.previousSibling.style.display = "block";
+        indicator.textContent = "Click to collapse code";
         codeBlockH.style.height = "auto";
       }
     });

src/quantecon_book_theme/assets/styles/index.scss

@@ -1126,28 +1126,31 @@ tt {
   }
 
   div[class^="cell tag_collapse"] {
-    .toggle {
+    .collapse-toggle-bar {
       display: block;
       border: 1px solid #ddd;
       border-width: 0px 1px 1px 1px;
       padding: 0.5rem 25px;
       outline: 0;
       position: relative;
       text-align: center;
+      cursor: pointer;
+      background-color: #f9f9f9;
+      transition: background-color 0.2s ease;
+      
       &:hover {
         text-decoration: none;
-        background: #f7f7f7;
-      }
-      span {
-        color: #444;
-        position: relative;
-        top: 3px;
-        left: -5px;
+        background: #f0f0f0;
       }
-      em {
-        font-style: normal;
+      
+      .collapse-indicator {
+        color: #0072bc;
+        font-size: 0.9rem;
+        font-weight: 500;
+        user-select: none;
       }
     }
+    
     .highlight {
       overflow: hidden;
       margin-bottom: 0;