Javascript - 手风琴没有崩溃

Question

在this article的帮助下，我创建了一个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;