¿Quizás alguien sabe cómo abrir solo un contenedor a la vez? Ahora, en este ejemplo, ¿puedes abrir los tres? Me gustaría abrir solo uno y cuando se abra, cambie el texto a "Cerrar". ¿Algunas ideas?
Aquí está el enlace con un código para codepen: code https://codepen.io/jorgemaiden/pen/YgGZMg
¡Estaré realmente apreciado por cualquier ayuda y consejos!
Puede hacerlo de muchas maneras, pero de acuerdo con su referencia, simplemente agregaría una función que recorre sus elementos que no es su elemento en el que hizo clic, luego elimine la clase activa si está presente
var linkToggle = document.querySelectorAll(".js-toggle"); for (i = 0; i < linkToggle.length; i++) { linkToggle[i].addEventListener("click", function(event) { event.preventDefault(); var container = document.getElementById(this.dataset.container); this.innerText = "Close"; toggleSlide(container); }); } function toggleSlide(container) { for (i = 0; i < linkToggle.length; i++) { let el = document.getElementById(linkToggle[i].dataset.container); if (el != container && el.classList.contains("active")) { el.style.height = "0px"; linkToggle[i].innerText = "Click"; el.addEventListener( "transitionend", function() { el.classList.remove("active"); }, { once: true } ); } } if (!container.classList.contains("active")) { container.classList.add("active"); container.style.height = "auto"; var height = container.clientHeight + "px"; container.style.height = "0px"; setTimeout(function() { container.style.height = height; }, 0); } else { container.style.height = "0px"; container.addEventListener( "transitionend", function() { container.classList.remove("active"); }, { once: true } ); } } .box { width: 300px; border: 1px solid #000; margin: 10px; cursor: pointer; } .toggle-container { transition: height 0.35s ease-in-out; overflow: hidden; } .toggle-container:not(.active) { display: none; } <div class="box"> <div class="js-toggle" data-container="toggle-1">Click</div> <div class="toggle-container" id="toggle-1">I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.<br><br> I have an accordion and am animating the the height fferent lengths. </div> </div> <div class="box"> <div class="js-toggle active" data-container="toggle-2">Click</div> <div class="toggle-container open" id="toggle-2">I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.<br><br> I have an accordion and am animating the the height fferent lengths. </div> </div> <div class="box"> <div class="js-toggle" data-container="toggle-3">Click</div> <div class="toggle-container" id="toggle-3">I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.<br><br> I have an accordion and am animating the the height fferent lengths. </div> </div>