const sContent = document.getElementsByClassName("content"),
  sHeader = document.querySelectorAll(".header");

function toggleSki() {
  let itemClass = this.parentNode.className;

  for (i = 0; i < sContent.length; i++) {
    sContent[i].className = "content close";
  }
  if (itemClass === "content close") {
    this.parentNode.className = "content open";
  }
}
sHeader.forEach((el) => {
  el.addEventListener("click", toggleSki);
});

.close .list {
  height: 0;
  overflow: hidden;
  transition: 0.3s;
}

.open .list {
  height: auto;
  margin-bottom: 2.5em;
  ;
}

.open .arrow {
  transform: rotate(-180deg);
}

<div class="content close">

  <div class="header">

    <div class="title">
      <h3>headline</h3>
      <span>Sub title</span>
    </div>

  </div>

  <div class="list grid">

    <div class="data">

      <div class="titles flex">
        <h4 class="name">ABC</h4>
        <p class="number">100%</p>
      </div>

      <div class="bar">
        <div class="perc bg"></div>
        <div class="bar_bg 4d"></div>
      </div>

    </div>
  </div>
</div>