Collapse cross-refs by default, show first ref with expand for all

Cross-reference sidenotes now show just one verse reference by default
with a "+N more" indicator. Click to expand and see all grouped refs.
This reduces sidebar clutter while keeping all cross-refs accessible.

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

Co-Authored-By: Claude <noreply@anthropic.com>

kjvstudy_org/routes/bible.py

@@ -234,10 +234,10 @@ async def read_chapter(request: Request, book: str, chapter: int):
                 'url': url
             })
 
-        # Convert to list of groups for template (limit to 3 groups, 4 refs per group)
+        # Convert to list of groups for template (collapsible - shows first ref, expand for all)
         commentary['cross_reference_groups'] = [
-            {'description': desc, 'refs': refs[:4]}
-            for desc, refs in list(grouped_refs.items())[:3]
+            {'description': desc, 'refs': refs}
+            for desc, refs in grouped_refs.items()
         ]
         commentaries[verse.verse] = commentary
 
@@ -320,10 +320,10 @@ async def chapter_pdf(request: Request, book: str, chapter: int):
             description = ref['note'] if ref['note'] else 'Related'
             grouped_refs[description].append(ref['ref'])
 
-        # Limit to 3 groups, 4 refs per group (same as web view)
+        # Pass all cross-refs (PDF has more space)
         commentary['cross_reference_groups'] = [
-            {'description': desc, 'refs': refs[:4]}
-            for desc, refs in list(grouped_refs.items())[:3]
+            {'description': desc, 'refs': refs}
+            for desc, refs in grouped_refs.items()
         ]
         commentaries[verse.verse] = commentary
 

kjvstudy_org/templates/chapter.html

@@ -127,6 +127,47 @@
     content: "";
 }
 
+/* Cross-refs: collapsed by default, show just first ref */
+.sidenote.cross-refs {
+    max-height: none;
+    overflow: visible;
+    cursor: pointer;
+}
+
+.sidenote.cross-refs .xref-details {
+    display: none;
+}
+
+.sidenote.cross-refs .xref-preview {
+    display: inline;
+}
+
+.sidenote.cross-refs.expanded .xref-details {
+    display: block;
+    margin-top: 0.5em;
+}
+
+.sidenote.cross-refs.expanded .xref-preview {
+    display: none;
+}
+
+.xref-more {
+    font-size: 0.85em;
+    color: var(--text-secondary);
+    font-style: italic;
+}
+
+/* Show expand indicator for collapsed cross-refs */
+.sidenote.cross-refs:not(.expanded)::after {
+    content: " ▸";
+    font-size: 0.8em;
+    color: var(--text-secondary);
+}
+
+.sidenote.cross-refs.expanded::after {
+    content: "";
+}
+
 @media (max-width: 760px) {
     .sidenote,
     .marginnote {
@@ -431,12 +472,18 @@ document.body.dataset.resourceReader = 'false';
         <a href="/book/{{ book }}/chapter/{{ chapter }}/verse/{{ verse.verse }}" class="verse-number-link{% if has_commentary %} has-commentary{% endif %}">{{ verse.verse }}</a> {{ verse.text | red_letter(book, chapter, verse.verse) | inject_word_markers(commentary.word_studies if commentary else [], verse.verse) | link_names | safe }}
         {% if commentary %}
             {% if commentary.cross_reference_groups %}
+                {% set first_group = commentary.cross_reference_groups[0] %}
+                {% set first_ref = first_group.refs[0] if first_group.refs else none %}
+                {% set total_refs = commentary.cross_reference_groups | sum(attribute='refs', start=[]) | length %}
                 <label for="sn-{{ verse.verse }}-xrefs" class="margin-toggle sidenote-number"></label>
                 <input type="checkbox" id="sn-{{ verse.verse }}-xrefs" class="margin-toggle"/>
-                <span class="sidenote">
+                <span class="sidenote cross-refs">
+                    <span class="xref-preview">{% if first_ref %}<a href="{{ first_ref.url }}">{{ first_ref.text }}</a>{% if total_refs > 1 %} <span class="xref-more">+{{ total_refs - 1 }} more</span>{% endif %}{% endif %}</span>
+                    <span class="xref-details">
                     {% for group in commentary.cross_reference_groups %}
                         <strong>{{ group.description }}:</strong> {% for ref in group.refs %}<a href="{{ ref.url }}">{{ ref.text }}</a>{% if not loop.last %}; {% endif %}{% endfor %}.{% if not loop.last %}<br>{% endif %}
                     {% endfor %}
+                    </span>
                 </span>
             {% endif %}
         {% endif %}