Javascript - 手風琴沒有崩潰

Question

在這篇文章的幫助下，我創建了一個javascript手風琴。

唯一的問題是，它沒有開始崩潰，我似乎無法這樣做。

謝謝你的幫助

CODEPEN

<div id="toggle-button1" class="section akkordeon">
<div class="akkordeon-title">LOREM IPSUM TITLE</div>
<div id="akkordeon-content1" class="section collapsible">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>

Answer 1

添加一些css將初始值設置為0

#akkordeon-content1 {
  height: 0;
}

還有一個名為details的HTML元素為您執行此功能。

 <details> <summary>Details</summary> Something small enough to escape casual notice. </details> 

文檔： https ： //developer.mozilla.org/en-US/docs/Web/HTML/Element/details

Answer 2

var section = document.querySelector('#akkordeon-content1');
collapseSection(section)

將該代碼添加到您的JavaScript中。 在任何事物之外

Answer 3

只需默認隱藏容器。

.collapsible {
   height: 0;
}

並從代碼中刪除此行，以便它不會崩潰：

//(line 42) element.style.height = null;