// Obtener todos los elementos .box const boxes = document.querySelectorAll('.servicios .uc_bold_tabs'); // Función para ocultar todos los .panel-container function hideAllPanels() { boxes.forEach(box => { const panel = box.querySelector('.panel-container'); if (panel) { panel.style.display = 'none'; } }); } // Función para restablecer el estado inicial de todos los elementos "li" function resetLiStates() { boxes.forEach(box => { const listItems = box.querySelectorAll('li'); listItems.forEach(item => { item.classList.remove('r-tabs-state-active'); item.classList.add('r-tabs-state-default'); }); }); } // Agregar evento de clic a cada elemento "li" dentro de cada .box boxes.forEach(box => { const listItems = box.querySelectorAll('li'); listItems.forEach(item => { item.addEventListener('click', () => { // Ocultar todos los .panel-container hideAllPanels(); // Restablecer el estado inicial de todos los elementos "li" resetLiStates(); // Activar el elemento "li" clickeado item.classList.remove('r-tabs-state-default'); item.classList.add('r-tabs-state-active'); // Mostrar el .panel-container correspondiente al "li" clickeado const panel = box.querySelector('.panel-container'); if (panel) { panel.style.display = 'block'; } }); }); });