SlideToggle 一次只打開一個容器 Vanilla JS

Question

也許有人知道如何一次只打開一個容器？ 現在在這個例子中你可以打開所有三個？ 我只想打開一個，打開后將文本更改為“關閉”。 有任何想法嗎？

這是代碼筆代碼的鏈接： code https://codepen.io/jorgemaiden/pen/YgGZMg

我將非常感謝任何幫助和提示！

Answer 1

您可以通過多種方式做到這一點，但根據您的參考，我只會添加 function 循環遍歷您的元素，這不是您點擊的元素，然后刪除活動的 class（如果存在）

 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>