可折叠框不以html和css显示我的所有文本

<div class="collapsible">
  <div class="collapsible-header">点击展开/折叠</div>
  <div class="collapsible-content">
    <!-- 这里是要折叠的内容 -->
    <p>这里是文本内容...</p>
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
    </ul>
  </div>
</div>

.collapsible {
  border: 1px solid #ccc;
}

.collapsible-header {
  background-color: #f0f0f0;
  padding: 10px;
  cursor: pointer;
}

.collapsible-content {
  display: none;
  padding: 10px;
}

document.addEventListener('DOMContentLoaded', function() {
  var headers = document.getElementsByClassName('collapsible-header');
  
  Array.from(headers).forEach(function(header) {
    header.addEventListener('click', function() {
      var content = this.nextElementSibling;
      if (content.style.display === 'none') {
        content.style.display = 'block';
      } else {
        content.style.display = 'none';
      }
    });
  });
});