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
+consttipsGrid=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
+consttipsGrid=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)
+ ========================================================== */
+constinitViewToggle=()=>{
+consttoggleBtn=document.getElementById('viewToggle');
+consttipsGrid=document.getElementById('tipsGrid');
+if(!toggleBtn||!tipsGrid)return;
+
+letisExpanded=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:16px0;
+}
+
+.view-toggle-btn {
+display: inline-flex;
+align-items: center;
+gap:8px;
+padding:10px20px;
+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>
 <buttonclass="filter-pill" data-filter="security">Security</button>
 <buttonclass="filter-pill" data-filter="tooling">Tooling</button>
 </div>
+<divclass="view-toggle-wrap">
+<buttonclass="view-toggle-btn" id="viewToggle" aria-label="Toggle view mode">
+<spanclass="view-toggle-icon">⊟</span>
+<spanclass="view-toggle-text">Expand All</span>
+</button>
+</div>
 <divclass="tips-grid" id="tipsGrid">
 {{tipCards}}
 </div>