创建一个手风琴，在折叠之前，主要内容部分可部分可见。

以下是一个使用HTML、CSS和JavaScript创建手风琴的示例代码：

HTML代码：

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">Section 1</div>
    <div class="accordion-content">
      <p>This is the content of section 1.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Section 2</div>
    <div class="accordion-content">
      <p>This is the content of section 2.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Section 3</div>
    <div class="accordion-content">
      <p>This is the content of section 3.</p>
    </div>
  </div>
</div>

CSS代码：

.accordion {
  width: 300px;
}

.accordion-item {
  border-bottom: 1px solid #ccc;
}

.accordion-header {
  background-color: #f1f1f1;
  padding: 10px;
  cursor: pointer;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.accordion-content p {
  margin: 10px;
}

JavaScript代码：

document.addEventListener("DOMContentLoaded", function() {
  var accordionHeaders = document.getElementsByClassName("accordion-header");

  for (var i = 0; i < accordionHeaders.length; i++) {
    accordionHeaders[i].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";
      }
    });
  }
});

通过以上代码，我们创建了一个手风琴，当点击手风琴的标题时，相应的内容部分会展开或折叠。初始状态下，内容部分是折叠的，只有标题部分可见。