A Vet for the Animal People.

tag) document.addEventListener('DOMContentLoaded', function() { // Get all accordion triggers const accordionTriggers = document.querySelectorAll('.regions_header'); // Track currently open accordion let currentlyOpen = null; // Set up CSS transitions via JavaScript setupTransitions(); // Set up hover animations (desktop only) setupHoverAnimations(); accordionTriggers.forEach(trigger => { trigger.addEventListener('click', function(e) { e.preventDefault(); // Get the accordion item and content const currentAccordion = this.closest('.regions_item'); const currentContent = currentAccordion.querySelector('.regions_content'); // Check if clicking on already open accordion if (currentlyOpen === currentAccordion) { // Close current accordion closeAccordion(currentAccordion); currentlyOpen = null; } else { // Close previously open accordion if exists if (currentlyOpen) { closeAccordion(currentlyOpen); } // Open new accordion openAccordion(currentAccordion); currentlyOpen = currentAccordion; } }); }); // Function to set up CSS transitions via JavaScript function setupTransitions() { const outQuart = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'; const duration = '0.4s'; // Set up content transitions document.querySelectorAll('.regions_content').forEach(content => { content.style.transition = `height ${duration} ${outQuart}`; content.style.overflow = 'hidden'; content.style.height = '0px'; // Default closed state }); // Set up header transitions document.querySelectorAll('.regions_header').forEach(header => { header.style.transition = `background-color ${duration} ${outQuart}`; }); // Set up drawer icon transitions document.querySelectorAll('.drawer_icon').forEach(icon => { icon.style.transition = `transform ${duration} ${outQuart}, color ${duration} ${outQuart}`; }); // Set up active background transitions document.querySelectorAll('.drawer_icon-active-background').forEach(bg => { bg.style.transition = `opacity ${duration} ${outQuart}`; }); // Set up hover icon transitions document.querySelectorAll('.drawer_icon-hover').forEach(hover => { hover.style.transition = `opacity ${duration} ${outQuart}, transform ${duration} ${outQuart}`; }); // Set up hover background transitions (for hover animations) document.querySelectorAll('.drawer_icon-hover-background').forEach(hoverBg => { hoverBg.style.transition = `opacity ${duration} ${outQuart}`; }); // Set up hover border transitions document.querySelectorAll('.regions_hover-border-top').forEach(hoverBorder => { hoverBorder.style.transition = `opacity ${duration} ${outQuart}`; hoverBorder.style.opacity = '0'; // Default state }); document.querySelectorAll('.regions_hover-border-bottom').forEach(hoverBorder => { hoverBorder.style.transition = `opacity ${duration} ${outQuart}`; hoverBorder.style.opacity = '0'; // Default state }); } // Function to set up hover animations (desktop only - 992px+) function setupHoverAnimations() { // Only setup hover animations on desktop breakpoints function isDesktop() { return window.innerWidth >= 992; } document.querySelectorAll('.regions_item').forEach(item => { const header = item.querySelector('.regions_header'); const hoverIcon = header.querySelector('.drawer_icon-hover'); const hoverBackground = header.querySelector('.drawer_icon-hover-background'); const hoverBorderTop = item.querySelector('.regions_hover-border-top'); const hoverBorderBottom = item.querySelector('.regions_hover-border-bottom'); // Track hover state let isHovering = false; item.addEventListener('mouseenter', function() { isHovering = true; // Border animations work on all breakpoints if (hoverBorderTop) { hoverBorderTop.style.opacity = '1'; } if (hoverBorderBottom && !item.classList.contains('is-open')) { hoverBorderBottom.style.opacity = '1'; } // Only apply other hover effects on desktop and if accordion is not open if (isDesktop() && !item.classList.contains('is-open')) { // Hover In animations if (hoverBackground) { hoverBackground.style.opacity = '1'; } if (hoverIcon) { hoverIcon.style.opacity = '1'; } } }); item.addEventListener('mouseleave', function() { isHovering = false; // Border animations work on all breakpoints if (!item.classList.contains('is-open')) { if (hoverBorderTop) { hoverBorderTop.style.opacity = '0'; } if (hoverBorderBottom) { hoverBorderBottom.style.opacity = '0'; } } // Only reset other hover effects on desktop and if accordion is not open if (isDesktop() && !item.classList.contains('is-open')) { // Hover Out animations if (hoverBackground) { hoverBackground.style.opacity = '0'; } if (hoverIcon) { hoverIcon.style.opacity = '0'; } } }); // Store hover state on the element for access in close function item._isHovering = function() { return isHovering; }; }); // Re-check on window resize to handle breakpoint changes window.addEventListener('resize', function() { // Reset desktop-only hover states when switching breakpoints if (!isDesktop()) { document.querySelectorAll('.regions_item').forEach(item => { const header = item.querySelector('.regions_header'); const hoverIcon = header.querySelector('.drawer_icon-hover'); const hoverBackground = header.querySelector('.drawer_icon-hover-background'); if (!item.classList.contains('is-open')) { if (hoverBackground) { hoverBackground.style.opacity = '0'; } if (hoverIcon) { hoverIcon.style.opacity = '0'; } } }); } }); } // Function to open accordion function openAccordion(container) { const content = container.querySelector('.regions_content'); const header = container.querySelector('.regions_header'); const drawerIcon = container.querySelector('.drawer_icon'); const activeBackground = container.querySelector('.drawer_icon-active-background'); const hoverIcon = container.querySelector('.drawer_icon-hover'); const hoverBorderTop = container.querySelector('.regions_hover-border-top'); const hoverBorderBottom = container.querySelector('.regions_hover-border-bottom'); // Add open state class container.classList.add('is-open'); // Animate content height const height = content.scrollHeight + 'px'; content.style.height = height; // Animate header background header.style.backgroundColor = '#93b2e8'; // Animate drawer icon if (drawerIcon) { drawerIcon.style.transform = 'rotate(45deg)'; drawerIcon.style.color = '#f4f0e2'; } // Animate active background if (activeBackground) { activeBackground.style.opacity = '1'; } // Animate hover icon if (hoverIcon) { hoverIcon.style.opacity = '0'; hoverIcon.style.transform = 'rotate(45deg)'; } // Keep top border visible when open, hide bottom border if (hoverBorderTop) { hoverBorderTop.style.opacity = '1'; } if (hoverBorderBottom) { hoverBorderBottom.style.opacity = '0'; } } // Function to close accordion function closeAccordion(container) { const content = container.querySelector('.regions_content'); const header = container.querySelector('.regions_header'); const drawerIcon = container.querySelector('.drawer_icon'); const activeBackground = container.querySelector('.drawer_icon-active-background'); const hoverIcon = container.querySelector('.drawer_icon-hover'); const hoverBackground = container.querySelector('.drawer_icon-hover-background'); const hoverBorderTop = container.querySelector('.regions_hover-border-top'); const hoverBorderBottom = container.querySelector('.regions_hover-border-bottom'); // Check if currently hovering const isHovering = container._isHovering ? container._isHovering() : false; // Remove open state class container.classList.remove('is-open'); // Animate content height to 0 content.style.height = '0px'; // Remove inline background style to allow CSS hover to work header.style.backgroundColor = ''; // Animate drawer icon if (drawerIcon) { drawerIcon.style.transform = 'rotate(0deg)'; drawerIcon.style.color = '#341c03'; } // Animate active background if (activeBackground) { activeBackground.style.opacity = '0'; } // Animate hover icon if (hoverIcon) { hoverIcon.style.opacity = '0'; hoverIcon.style.transform = 'rotate(0deg)'; } // Reset hover background to default closed state if (hoverBackground) { hoverBackground.style.opacity = '0'; } // Only reset hover borders if NOT currently hovering if (!isHovering) { if (hoverBorderTop) { hoverBorderTop.style.opacity = '0'; } if (hoverBorderBottom) { hoverBorderBottom.style.opacity = '0'; } } else { // If hovering, keep top border visible, show bottom border again if (hoverBorderTop) { hoverBorderTop.style.opacity = '1'; } if (hoverBorderBottom) { hoverBorderBottom.style.opacity = '1'; } } } });