const filterButtons = document.querySelectorAll('.elementor-button'); // Rendre le bouton "todos" actif par défaut const defaultButton = document.getElementById('todos'); defaultButton.classList.add('active'); // Ajouter un écouteur d'événements à chaque bouton filterButtons.forEach(button => { button.addEventListener('click', function(e) { // Empêcher le comportement par défaut e.preventDefault(); // Récupérer l'ID du bouton cliqué const filterClass = this.id; // Utilise l'ID du bouton comme nom de la classe // Supprimer la classe 'active' de tous les boutons filterButtons.forEach(btn => btn.classList.remove('active')); // Ajouter la classe 'active' au bouton cliqué this.classList.add('active'); // Sélectionner tous les projets const projects = document.querySelectorAll('.elementor-widget-loop-grid .proyectos'); // Si l'ID est "todos", afficher tous les projets if (filterClass === 'todos') { projects.forEach(project => { project.style.display = 'block'; // Afficher tous les projets }); } else { // Pour les autres filtres, afficher uniquement les projets avec la classe correspondante projects.forEach(project => { const firstChild = project.querySelector('div:first-child'); // Sélectionner le premier enfant div if (firstChild && firstChild.classList.contains(filterClass)) { project.style.display = 'block'; // Afficher les projets correspondants } else { project.style.display = 'none'; // Masquer les autres projets } }); } }); });