Obtuve 3 acordeones en una página de producto de Shopify, de los cuales tengo la intención de mantener el primero expandido de forma predeterminada en la carga de la página. Una vez cargada la página, hacer clic en otros acordeones debería cerrar todos los abiertos previamente. Quiero hacerlo solo con JavaScript puro (sin bibliotecas como jQuery) o CSS. Mi código a continuación solo asegura que el primer acordeón se muestre expandido. ¿Podría ayudarme a corregir mi código después de echar un vistazo a los acordeones en la página https://wv3yau73hiyf9fhv-458195004.shopifypreview.com ?
window.onload = function() { var accItem = document.getElementsByClassName('accordion__item'); // Keep the first accordion open by default. for (i = 0; i < accItem.length; i++) { console.log("Within first for loop"); accItem[0].click(); accItem[i].addEventListener('click', toggleItem, false); } function toggleItem() { var itemClass = this.parentNode.className; for (i = 0; i < accItem.length; i++) { console.log("Within second for loop"); accItem[i].className = 'accordion__item close'; } if (itemClass == 'accordion__item close') { this.parentNode.className = 'accordion__item open'; } } };Usando la consola del navegador en la página, usé lo siguiente para abrir el primer acordeón:
let allAccordions = document.querySelectorAll(".accordion__item"); allAccordions[0].click();Sí, un bucle también es posible:
for (var i = 0; i < allAccordions.length; i++) { if (i == 0) { allAccordions[i].click(); break; // only the first, can stop looping. } }Finalmente, la solución es la siguiente:
// Keep the first accordion open by default. let allAccordions = document.querySelectorAll(".accordion__item"); if (allAccordions.length > 0) { allAccordions[0].querySelector("input[type=radio]").checked = true; } // Capture click event for the accordions allAccordions.forEach(element => { element.addEventListener('click', function() { let radioBtn = this.querySelector("input[type=radio]"); let clickedRadioName = radioBtn.getAttribute("name"); allAccordions.forEach(element => { let elementRadioBtn = element.querySelector("input[type=radio]"); let elementRadioName = elementRadioBtn.getAttribute("name"); if ((elementRadioName != clickedRadioName) && elementRadioBtn.checked) { element.querySelector("input[type=radio]").checked = false; } }); }); });