Clean, clickable cards that expand/collapse on click

Independent operation of each card
Smooth animations for better user experience
Mobile-friendly design with appropriate spacing and touch targets
Keyboard accessibility (Escape key support)
Click-outside behavior to close cards
Removed complex checkbox-based implementation in favor of simple JavaScript toggling

public/js/components.js

@@ -24,14 +24,58 @@ document.addEventListener('DOMContentLoaded', function() {
         loadComponent('components/footer.html', 'beforeend')
     ]).then(results => {
         if (results.every(Boolean)) {
-            // Dispatch custom event when all components are loaded
             document.dispatchEvent(new Event('componentsLoaded'));
+            initializeTooltips();
         }
     }).catch(error => {
         console.warn('Error loading components:', error);
     });
 
-    // Initialize header functionality after it's loaded
+    // Initialize tooltip functionality
+    function initializeTooltips() {
+        const tooltipContainers = document.querySelectorAll('.tooltip-container');
+        
+        tooltipContainers.forEach(container => {
+            container.addEventListener('click', function(e) {
+                // Prevent click from propagating if clicking inside the content when expanded
+                if (this.classList.contains('active') && 
+                    e.target.closest('.tooltip-content') && 
+                    !e.target.closest('.tooltip-header')) {
+                    return;
+                }
+                
+                // Toggle current container
+                this.classList.toggle('active');
+                
+                // Close other containers
+                tooltipContainers.forEach(otherContainer => {
+                    if (otherContainer !== this && otherContainer.classList.contains('active')) {
+                        otherContainer.classList.remove('active');
+                    }
+                });
+            });
+        });
+
+        // Close tooltips when clicking outside
+        document.addEventListener('click', function(e) {
+            if (!e.target.closest('.tooltip-container')) {
+                tooltipContainers.forEach(container => {
+                    container.classList.remove('active');
+                });
+            }
+        });
+
+        // Handle escape key
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape') {
+                tooltipContainers.forEach(container => {
+                    container.classList.remove('active');
+                });
+            }
+        });
+    }
+
+    // Initialize header functionality
     function initializeHeader() {
         const header = document.querySelector('header');
         if (!header) return;