Details

details.js

// toggle details

let detailsBtns = document.querySelectorAll('.details__btn');
if (detailsBtns) {
  detailsBtns.forEach(btn => btn.addEventListener('click', (e) => {
    this.closest('.details').classList.toggle('details--open');
  }))
}

// end toggle details

details.scss

.details {
  position: relative;
  padding-top: 24px;
  padding-bottom: 24px;
  padding-left: 12px;
  padding-right: 12px;
  margin-bottom: 24px;
  border-radius: 12px;
  box-shadow: 0 0 16px 0 #C1CDDF;
  background: white;
}

.details__header {
  position: relative;
}

.details__title {
  padding-right: 30px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 18px;
}

.details__btn {
  position: absolute;
  top: 50%;
  right: 0;
  width: 10px;
  height: 6px;
  margin-top: -3px; // это вместо трансформа. чтобы не мешать rotate
  border: none;
  background: transparent url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L5 6L10 0L0 0Z' fill='%23999999'/%3E%3C/svg%3E") no-repeat center;
  transition: transform 0.3s;

  &:focus {
    outline: none;
  }
}

.details--open {

  .details__title {
    margin-bottom: 24px;
  }
  
  .details__btn {
    transform: rotate(180deg);
  }
}

.details:not(.details--open) .details__text {
  display: none;
}

index.html

<section class="details details--open">  
  <header class="details__header">
    <h3 class="details__title">Title</h3>
    <button class="details__btn" aria-label="Открыть/закрыть подробности"></button>
  </header>
  
  <div class="details__text">
    Text
  </div>  
</section>