如何创建切换箭头，以便在您单击箭头时“打开”一个部分以显示文本？

<div id="toggle-container">
  <div class="arrow"></div>
  <div class="text">这是要显示的文本</div>
</div>

.arrow {
  width: 10px;
  height: 10px;
  border: solid black;
  border-width: 0 2px 2px 0;
  display: inline-block;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.arrow.active {
  transform: rotate(-135deg);
}

var container = document.getElementById("toggle-container");
var arrow = container.querySelector(".arrow");

container.addEventListener("click", function() {
  arrow.classList.toggle("active");
});