From 18a65fb5069d4d174250d945214b8ddd24d4afc0 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell@unturf.com>
Date: Fri, 19 Dec 2025 16:00:08 -0500
Subject: [PATCH] Replace JS toggle with pure CSS using HTML details element

---
 remarkbox/static/css/common.css          | 81 +++++++++++++++++++-----
 remarkbox/static/js/custom.js            | 11 ----
 remarkbox/templates/base.j2              |  8 +--
 remarkbox/templates/list-nodes.j2        | 10 +--
 remarkbox/templates/show-node.j2         | 27 ++++----
 remarkbox/templates/snippets/forms.j2    |  4 --
 remarkbox/templates/snippets/snippets.j2 | 10 +--
 7 files changed, 94 insertions(+), 57 deletions(-)

diff --git a/remarkbox/static/css/common.css b/remarkbox/static/css/common.css
index ebc86be..bb2383b 100644
--- a/remarkbox/static/css/common.css
+++ b/remarkbox/static/css/common.css
@@ -411,33 +411,84 @@ form.node-action {
   opacity: 0.8 !important;
 }
 
-.remark-box-div-main {
-  margin-bottom: 35px;
+/* Pure CSS toggle using <details> element */
+.toggle-summary {
+  cursor: pointer;
+  list-style: none;
 }
 
-.remark-box-div {
+.toggle-summary::-webkit-details-marker {
   display: none;
-  /* this is needed to prevent "jumping" jquery bug. */
-  overflow: hidden;
-  margin-top: 10px;
 }
 
-.edit-box-div {
+.toggle-summary::marker {
   display: none;
-  /* this is needed to prevent "jumping" jquery bug. */
-  overflow: hidden;
+  content: "";
+}
+
+/* Toggle text switching: show/hide different text based on open state */
+.toggle-summary .when-open {
+  display: none;
+}
+
+.toggle-summary .when-closed {
+  display: inline;
+}
+
+details[open] > .toggle-summary .when-open {
+  display: inline;
+}
+
+details[open] > .toggle-summary .when-closed {
+  display: none;
+}
+
+/* Hidden summary for main remark box (always open) */
+.toggle-summary-hidden {
+  display: none;
+}
+
+/* Fallback links hidden when JS not needed */
+.toggle-fallback {
+  display: none;
+}
+
+/* Edit box details styling */
+.edit-box-details {
   margin-top: 15px;
 }
 
-.my-namespaces-div {
-  display: none;
+/* Remark box details styling */
+.remark-box-details {
+  margin-top: 10px;
+}
+
+.remark-box-details-main {
+  margin-bottom: 35px;
+}
+
+/* Namespace switcher dropdown */
+.my-namespaces-details {
+  display: inline;
+  position: relative;
+}
+
+.my-namespaces-content {
   position: absolute;
   background-color: #ffffff;
   z-index: 1;
-  /* this is needed to prevent "jumping" jquery bug. */
-  overflow: hidden;
-  padding-top: 10px;
-  padding-bottom: 10px;
+  padding: 10px;
+  border: 1px solid #ddd;
+  min-width: 120px;
+}
+
+/* Node children collapse/expand */
+.node-children-details {
+  margin-top: 5px;
+}
+
+.node-children-details > .toggle-summary {
+  margin-bottom: 5px;
 }
 
 #remarkbox-footer {
diff --git a/remarkbox/static/js/custom.js b/remarkbox/static/js/custom.js
index ab28d8a..c9ccbe5 100644
--- a/remarkbox/static/js/custom.js
+++ b/remarkbox/static/js/custom.js
@@ -37,17 +37,6 @@ function sendPreview(textarea, div, mathjax=false){
     }
 }
 
-// this toggles a dropdown.
-function toggle(target, button, off_text, on_text="hide"){
-    if (!$('#' + target + ":visible").height()){
-        $('#' + target).slideDown("slow");
-        $('#' + button).text(on_text);
-    }
-    else {
-        $('#' + target).slideUp("slow");
-        $('#' + button).text(off_text);
-    }
-}
 
 $(document).ready( function() {
 
diff --git a/remarkbox/templates/base.j2 b/remarkbox/templates/base.j2
index f0c7d78..6a8d35c 100644
--- a/remarkbox/templates/base.j2
+++ b/remarkbox/templates/base.j2
@@ -35,10 +35,9 @@
     {{ snippets.namespace_home_uri(request.namespace) }} &nbsp;
 
     {%- if request.mode != 'embed' and request.user.authenticated and request.user.namespaces %}
-    <a href="{{ domain_app }}/u/namespaces" onclick="toggle('my-namespaces-div', 'my-namespaces-link', '(switch)', '(switch)'); return false;" id="my-namespaces-link">(switch)</a>
-
-    <div id="my-namespaces-div" class="my-namespaces-div">
-
+    <details id="my-namespaces-details" class="my-namespaces-details">
+    <summary class="toggle-summary" id="my-namespaces-link">(switch)</summary>
+    <div class="my-namespaces-content">
     {% for namespace in request.user.namespaces %}
       {% if namespace != request.namespace %}
       {{ snippets.namespace_home_uri(namespace) }}
@@ -51,6 +50,7 @@
       <a href="{{ domain_app }}/setup" class="button">setup</a>
       </center>
     </div>
+    </details>
     &nbsp;
     {%- endif %}
 
diff --git a/remarkbox/templates/list-nodes.j2 b/remarkbox/templates/list-nodes.j2
index 483a547..679bc15 100644
--- a/remarkbox/templates/list-nodes.j2
+++ b/remarkbox/templates/list-nodes.j2
@@ -46,13 +46,15 @@ page: {{ request.page_number }}
   {{ snippets.actions(node) }}
 </div>
 
-<div id="edit-box-{{ node.id }}" class="edit-box-div">
+<details id="edit-box-{{ node.id }}" class="edit-box-details">
+   <summary class="action toggle-summary"><span class="when-closed">edit</span><span class="when-open">hide</span></summary>
    {{ forms.edit(node) }}
-</div>
+</details>
 
-<div id="remark-box-{{ node.id }}" class="remark-box-div">
+<details id="remark-box-{{ node.id }}" class="remark-box-details">
+   <summary class="remark toggle-summary"><span class="when-closed">remark</span><span class="when-open">hide</span></summary>
    {{ forms.reply(node, node) }}
-</div>
+</details>
 
 {% endfor -%}
 
diff --git a/remarkbox/templates/show-node.j2 b/remarkbox/templates/show-node.j2
index 2e47d9b..c925990 100644
--- a/remarkbox/templates/show-node.j2
+++ b/remarkbox/templates/show-node.j2
@@ -75,13 +75,15 @@
 </div>
 {% endif %}
 
-<div id="edit-box-{{ request.node.id }}" class="edit-box-div">
+<details id="edit-box-{{ request.node.id }}" class="edit-box-details">
+   <summary class="action toggle-summary"><span class="when-closed">edit</span><span class="when-open">hide</span></summary>
    {{ forms.edit(request.node) }}
-</div>
+</details>
 
-<div id="remark-box-{{ request.node.id }}" class="remark-box-div-main not-hidden-remark-box-div">
+<details id="remark-box-{{ request.node.id }}" class="remark-box-details remark-box-details-main" open>
+   <summary class="toggle-summary toggle-summary-hidden"></summary>
    {{ forms.reply(request.node, request.root_node) }}
-</div>
+</details>
 
 
 {%- if request.node.id and request.node_graph[request.node.id] -%}
@@ -148,20 +150,23 @@
     <a href="{{ request.link_prefix }}/{{ parent.id }}#{{ parent.id }}" class="load-more shown-on-tablet">load more <span style="color: #292929; font-weight: normal;">({{children_ids | length}} remarks)</span></a>
     {% endif %}
 
-    <div id="edit-box-{{ parent.id }}" class="edit-box-div">
+    <details id="edit-box-{{ parent.id }}" class="edit-box-details">
+       <summary class="action toggle-summary"><span class="when-closed">edit</span><span class="when-open">hide</span></summary>
        {{ forms.edit(parent) }}
-    </div>
+    </details>
 
-    <div id="remark-box-{{ parent.id }}" class="remark-box-div">
+    <details id="remark-box-{{ parent.id }}" class="remark-box-details">
+       <summary class="remark toggle-summary"><span class="when-closed">remark</span><span class="when-open">hide</span></summary>
        {{ forms.reply(parent, request.root_node) }}
-    </div>
-    
+    </details>
+
     {#- nest children in this node's div for convo collapsing. -#}
-    <div id="node-children-{{ parent.id }}">
+    <details id="node-children-{{ parent.id }}" class="node-children-details" open>
+    <summary class="action link toggle-summary"><span class="when-closed">expand [+]</span><span class="when-open">collapse [-]</span></summary>
     {%- if children_ids %}
     {{ loop(children_ids) }}
     {% endif -%}
-    </div>
+    </details>
 
     {# close the class="node" div #}
     </div>
diff --git a/remarkbox/templates/snippets/forms.j2 b/remarkbox/templates/snippets/forms.j2
index 1c65b95..03b7539 100644
--- a/remarkbox/templates/snippets/forms.j2
+++ b/remarkbox/templates/snippets/forms.j2
@@ -1,5 +1,4 @@
 {% macro reply(node, root) %}
-
 {% if root.locked %}
 <br>
 <p>This thread was locked to prevent additional comments.</p>
@@ -39,11 +38,9 @@
 </form>
 
 {% endif %}
-
 {% endmacro %}
 
 {% macro edit(node) %}
-
 <form method="post" action="{{ request.link_prefix }}/{{ node.id }}/edit" onsubmit="submit.disabled = true; return true;">
 
     {% if node.title %}
@@ -70,7 +67,6 @@
 {% set submit_button_value = 'save message' %}
 {% include 'submit.j2' %}
 </form>
-
 {% endmacro %}
 
 {% macro pay_what_you_can() %}
diff --git a/remarkbox/templates/snippets/snippets.j2 b/remarkbox/templates/snippets/snippets.j2
index 0750af6..ed3f2f0 100644
--- a/remarkbox/templates/snippets/snippets.j2
+++ b/remarkbox/templates/snippets/snippets.j2
@@ -84,9 +84,7 @@
 
 {% macro button_remark(node, root_node) %}
     {% if root_node and not root_node.locked %}
-    <a href="{{ request.link_prefix }}/{{ node.id }}"
-       onclick="toggle('remark-box-{{ node.id }}', 'remark-link-{{ node.id }}', 'remark', 'hide'); document.getElementById('textarea-{{ node.id }}').focus(); return false;"
-       id="remark-link-{{ node.id }}" class="remark">remark</a>
+    <a href="{{ request.link_prefix }}/{{ node.id }}" id="remark-link-{{ node.id }}" class="remark toggle-fallback">remark</a>
     {% endif %}
 {% endmacro %}
 
@@ -99,9 +97,6 @@
 {% endmacro %}
 
 {% macro button_collapse(node) %}
-    <button
-       onclick="toggle('node-children-{{ node.id }}', 'collapse-link-{{ node.id }}', 'expand [+]', 'collapse [-]');"
-       id="collapse-link-{{ node.id }}" class="action link js-only">collapse [-]</button>
 {% endmacro %}
 
 {% macro permalinks(node, parent_node=None, root_node=None) %}
@@ -211,8 +206,7 @@
       {{ enable_node(node=node) }} &nbsp;
     {% else %}
       <a href="{{ request.link_prefix }}/{{ node.id }}/edit"
-          onclick="toggle('edit-box-{{ node.id }}', 'edit-link-{{ node.id }}', 'edit', 'hide'); document.getElementById('edit-textarea-{{ node.id }}').focus(); return false;"
-          id="edit-link-{{ node.id }}" class="action">edit</a>
+          id="edit-link-{{ node.id }}" class="action toggle-fallback">edit</a>
 
       {{ disable_node(node=node) }} &nbsp;