<div class="toggles">
  <div class="toggle">
    <details>
      <summary>ほげほげ</summary>
      <div class="toggle__content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet. Senectus et netus et malesuada. Amet aliquam id diam maecenas ultricies mi eget mauris pharetra. Elementum tempus egestas sed sed risus pretium. Porta nibh venenatis cras sed felis eget velit aliquet sagittis. Turpis egestas pretium aenean pharetra magna ac. Aliquet eget sit amet tellus cras adipiscing enim. Massa id neque aliquam vestibulum morbi. Augue mauris augue neque gravida in fermentum et. Augue ut lectus arcu bibendum. Id aliquet lectus proin nibh nisl. Vulputate enim nulla aliquet porttitor. Sollicitudin aliquam ultrices sagittis orci a scelerisque.
      </div>
    </details>
  </div>
  <div class="toggle">
    <details>
      <summary>ほげほげ</summary>
      <div class="toggle__content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet. Senectus et netus et malesuada. Amet aliquam id diam maecenas ultricies mi eget mauris pharetra. Elementum tempus egestas sed sed risus pretium. Porta nibh venenatis cras sed felis eget velit aliquet sagittis. Turpis egestas pretium aenean pharetra magna ac. Aliquet eget sit amet tellus cras adipiscing enim. Massa id neque aliquam vestibulum morbi. Augue mauris augue neque gravida in fermentum et. Augue ut lectus arcu bibendum. Id aliquet lectus proin nibh nisl. Vulputate enim nulla aliquet porttitor. Sollicitudin aliquam ultrices sagittis orci a scelerisque.
      </div>
    </details>
  </div>
</div>

body {
  max-width: 600px;
  padding: 3rem 1rem;
  font-size: 1.25rem;
  line-height: 1.333;
  font-family: sans-serif;
  margin: 0 auto;
}

.toggles {
  display: flex;
  flex-direction: column;
  gap: 1em;

  & .toggle {
    border-bottom: 1px solid #ddd;
  }
}

.toggle__content {
  padding: 1em;
}

details {
  /* アコーディオンオープン時のスタイル */
  &[open] summary {
  }

  &[open] .toggle__content {
    background-color: #ddd;
    animation: fadeIn 0.5s;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

summary {
  padding: 1em 0;
  display: block;
  cursor: pointer;

  &::-webkit-details-marker {
    display: none; //safariだけ三角が擬似要素のため別途打ち消す必要がある
  }
}