我想要通过css和JavaScript实现内容折叠与展开功能，并且我希望循环展示多个可以展开与折叠的内容，请为我提供代码和讲解

好的，让我为您提供示例代码和讲解。

HTML部分：

<div class="accordion">
  <div class="accordion-header">
    <h3>折叠内容1</h3>
    <span class="icon"></span>
  </div>
  <div class="accordion-content">
    <p>这是折叠内容1的详细信息。</p>
  </div>
  <div class="accordion-header">
    <h3>折叠内容2</h3>
    <span class="icon"></span>
  </div>
  <div class="accordion-content">
    <p>这是折叠内容2的详细信息。</p>
  </div>
  <div class="accordion-header">
    <h3>折叠内容3</h3>
    <span class="icon"></span>
  </div>
  <div class="accordion-content">
    <p>这是折叠内容3的详细信息。</p>
  </div>
</div>

CSS部分：

.accordion-header {
  cursor: pointer;
  background-color: #eee;
  padding: 18px;
  border: none;
  border-bottom: 1px solid #ddd;
  outline: none;
  transition: 0.4s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-header:hover {
  background-color: #ccc;
}

.accordion-header.active {
  background-color: #ccc;
}

.accordion-content {
  padding: 18px;
  border: 1px solid #ddd;
  background-color: white;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
  max-height: 0;
}

.accordion-content p {
  margin: 0;
}

JavaScript部分：

var accordionHeaders = document.querySelectorAll(".accordion-header");

accordionHeaders.forEach(function(header) {
  header.addEventListener("click", function() {
    this.classList.toggle("active");
    var accordionContent = this.nextElementSibling;
    if (accordionContent.style.maxHeight) {
      accordionContent.style.maxHeight = null;
    } else {
      accordionContent.style.maxHeight = accordionContent.scrollHeight + "px";
    }
  });
});

上述代码使用了CSS和JavaScript来实现折叠和展开的效果。其中，CSS部分定义了折叠框的样式，包括标题和内容。JavaScript部分为折叠框添加了点击事件，使得标题被点击时，对应的内容能够展开或折叠。在JavaScript部分中，我们使用了classList.toggle()方法来切换标题的样式，以及使用了scrollHeight属性来获取内容的实际高度，从而实现了内容的动态展开和折叠。

希望这个示例能够帮到您。如果您有任何疑问，请随时问我。