From d1fc66291a189a1d9c4c8a7643f96cc69a51fd5c Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Wed, 3 Dec 2025 12:40:02 -0500
Subject: [PATCH] Make cross references collapsed by default on verse pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User preference is still saved in localStorage - if expanded, stays expanded on subsequent visits.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 kjvstudy_org/templates/verse.html | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/kjvstudy_org/templates/verse.html b/kjvstudy_org/templates/verse.html
index 28fd61e..7abe007 100644
--- a/kjvstudy_org/templates/verse.html
+++ b/kjvstudy_org/templates/verse.html
@@ -931,12 +931,12 @@
 
 {% if cross_references %}
 <div class="cross-references-section" id="cross-references">
-    <button class="section-toggle expanded" onclick="toggleSection('crossrefs')" aria-expanded="true" aria-controls="crossrefs-content">
-        <span class="toggle-icon">▼</span>
+    <button class="section-toggle" onclick="toggleSection('crossrefs')" aria-expanded="false" aria-controls="crossrefs-content">
+        <span class="toggle-icon">▶</span>
         <span class="section-heading">Cross References</span>
         <span class="toggle-hint">({{ cross_references|length }} references)</span>
     </button>
-    <div id="crossrefs-content">
+    <div id="crossrefs-content" hidden>
         <p>Related verses that illuminate this passage:</p>
         <ul style="max-width: 65%; list-style: none; padding: 0;">
             {% for ref in cross_references %}
@@ -967,15 +967,15 @@
 <script>
 (function() {
     var pref = localStorage.getItem('crossrefs-expanded');
-    if (pref === 'false') {
+    if (pref === 'true') {
         var content = document.getElementById('crossrefs-content');
         var toggle = document.querySelector('.cross-references-section .section-toggle');
         if (content && toggle) {
             var icon = toggle.querySelector('.toggle-icon');
-            content.hidden = true;
-            toggle.setAttribute('aria-expanded', 'false');
-            icon.textContent = '▶';
-            toggle.classList.remove('expanded');
+            content.hidden = false;
+            toggle.setAttribute('aria-expanded', 'true');
+            icon.textContent = '▼';
+            toggle.classList.add('expanded');
         }
     }
 })();