// Expandable content functionality function setupExpandableButtons() { document.querySelectorAll('.expandable-button').forEach(button => { button.addEventListener('click', function() { const contentId = this.getAttribute('data-target'); const content = document.getElementById(contentId); const icon = this.querySelector('i'); // Toggle active class content.classList.toggle('active'); // Update icon and aria attributes const isExpanded = content.classList.contains('active'); this.setAttribute('aria-expanded', isExpanded); if (isExpanded) { icon.setAttribute('data-feather', 'chevron-up'); } else { icon.setAttribute('data-feather', 'chevron-down'); } feather.replace(); }); }); } // Mobile menu toggle functionality document.addEventListener('DOMContentLoaded', function() { setupExpandableButtons(); // FAQ toggle functionality document.querySelectorAll('[data-feather="chevron-down"]').forEach(icon => { const button = icon.parentElement; const content = button.nextElementSibling; button.addEventListener('click', () => { const isExpanded = content.classList.toggle('hidden'); if (isExpanded) { icon.setAttribute('data-feather', 'chevron-down'); } else { icon.setAttribute('data-feather', 'chevron-up'); } feather.replace(); }); }); // Initialize Feather Icons feather.replace(); // Mobile menu toggle (will be added to navbar component) const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); const navLinks = document.querySelector('.nav-links'); if (mobileMenuBtn && navLinks) { mobileMenuBtn.addEventListener('click', function() { navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex'; }); } // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); if (targetId === '#') return; const targetElement = document.querySelector(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth' }); } }); }); // Add animation class when elements come into view const animateOnScroll = function() { const elements = document.querySelectorAll('.card-hover, .fade-in'); elements.forEach(element => { const elementPosition = element.getBoundingClientRect().top; const screenPosition = window.innerHeight / 1.2; if (elementPosition < screenPosition) { element.classList.add('animate'); } }); }; window.addEventListener('scroll', animateOnScroll); animateOnScroll(); // Run once on page load });