Add expand/collapse all cards feature with toggle button

Co-authored-by: brunoborges <129743+brunoborges@users.noreply.github.com>

Author: Copilot

site/app.js

@@ -211,6 +211,12 @@
         // Only handle touches on the card-code area
         if (!e.target.closest('.card-code')) return;
 
+        // Don't handle touch events when in expanded mode
+        const tipsGrid = document.getElementById('tipsGrid');
+        if (tipsGrid && tipsGrid.classList.contains('expanded')) {
+          return;
+        }
+
         touchEndX = e.changedTouches[0].clientX;
         touchEndY = e.changedTouches[0].clientY;
 
@@ -245,6 +251,11 @@
       // This is a safety net in case touch events trigger click as fallback
       card.addEventListener('click', (e) => {
         if (e.target.closest('.card-code')) {
+          // Don't prevent navigation when in expanded mode
+          const tipsGrid = document.getElementById('tipsGrid');
+          if (tipsGrid && tipsGrid.classList.contains('expanded')) {
+            return;
+          }
           e.preventDefault();
           e.stopPropagation();
         }
@@ -470,6 +481,36 @@
     });
   };
 
+  /* ==========================================================
+     6. View Toggle (Expand/Collapse All Cards)
+     ========================================================== */
+  const initViewToggle = () => {
+    const toggleBtn = document.getElementById('viewToggle');
+    const tipsGrid = document.getElementById('tipsGrid');
+    if (!toggleBtn || !tipsGrid) return;
+
+    let isExpanded = false;
+
+    toggleBtn.addEventListener('click', () => {
+      isExpanded = !isExpanded;
+      
+      if (isExpanded) {
+        tipsGrid.classList.add('expanded');
+        toggleBtn.querySelector('.view-toggle-icon').textContent = '⊞';
+        toggleBtn.querySelector('.view-toggle-text').textContent = 'Collapse All';
+        
+        // Remove toggled class from all cards when expanding
+        document.querySelectorAll('.tip-card').forEach(card => {
+          card.classList.remove('toggled');
+        });
+      } else {
+        tipsGrid.classList.remove('expanded');
+        toggleBtn.querySelector('.view-toggle-icon').textContent = '⊟';
+        toggleBtn.querySelector('.view-toggle-text').textContent = 'Expand All';
+      }
+    });
+  };
+
   /* ==========================================================
      Utilities
      ========================================================== */
@@ -488,6 +529,7 @@
     });
     initFilters();
     initCardToggle();
+    initViewToggle();
     initCopyButtons();
     initSyntaxHighlighting();
     initNewsletter();

site/styles.css

@@ -589,6 +589,81 @@ nav {
   gap: 8px;
 }
 
+/* ---------- View Toggle Button ---------- */
+.view-toggle-wrap {
+  display: flex;
+  justify-content: center;
+  margin: 16px 0;
+}
+
+.view-toggle-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  font-size: 0.88rem;
+  font-weight: 500;
+  color: var(--text);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.25s;
+}
+
+.view-toggle-btn:hover {
+  background: var(--surface-2);
+  border-color: var(--border-light);
+  transform: translateY(-2px);
+}
+
+.view-toggle-icon {
+  font-size: 1.1rem;
+  line-height: 1;
+}
+
+/* ---------- Expanded Mode ---------- */
+.tips-grid.expanded .tip-card {
+  pointer-events: auto;
+}
+
+.tips-grid.expanded .tip-card:hover {
+  transform: none;
+  box-shadow: none;
+}
+
+.tips-grid.expanded .tip-card .card-code {
+  display: flex;
+  flex-direction: column;
+}
+
+.tips-grid.expanded .tip-card .old-layer,
+.tips-grid.expanded .tip-card .modern-layer {
+  position: static;
+  opacity: 1;
+  min-height: auto;
+  border-top: 1px solid var(--border);
+}
+
+.tips-grid.expanded .tip-card .old-layer {
+  border-top: none;
+}
+
+.tips-grid.expanded .tip-card .hover-hint {
+  display: none;
+}
+
+/* Disable hover effects in expanded mode */
+.tips-grid.expanded .tip-card:hover .old-layer,
+.tips-grid.expanded .tip-card.toggled .old-layer {
+  opacity: 1;
+}
+
+.tips-grid.expanded .tip-card:hover .modern-layer,
+.tips-grid.expanded .tip-card.toggled .modern-layer {
+  opacity: 1;
+}
+
 /* ---------- Stats Bar ---------- */
 .stats-bar {
   display: flex;

templates/index.html

@@ -240,6 +240,12 @@ <h2 class="section-title">All comparisons</h2>
       <button class="filter-pill" data-filter="security">Security</button>
       <button class="filter-pill" data-filter="tooling">Tooling</button>
     </div>
+    <div class="view-toggle-wrap">
+      <button class="view-toggle-btn" id="viewToggle" aria-label="Toggle view mode">
+        <span class="view-toggle-icon">⊟</span>
+        <span class="view-toggle-text">Expand All</span>
+      </button>
+    </div>
     <div class="tips-grid" id="tipsGrid">
 {{tipCards}}
     </div>