SlideToggle

<div className="parent">
  <h3 onClick={toggleView}>Утро</h3>
  <div className="hidden-child">
    <p>Здравствуйте!</p>
  </div>
</div>

SlideToggle JS

const toggleView = (event) => {
    const parent = event.target.parentElement;
    const el = parent.querySelector(".hidden-child");

    el.style.height = el.scrollHeight + "px";
    //el.scrollHeight = el.scrollHeight;

    parent.classList.toggle("open");
    el.style.height = parent.classList.contains("open")
      ? el.scrollHeight + "px"
      : 0;
  };
  

Style

.parent {
  &.open {
    .hidden-child {
      height: auto;
    }
  }
}

.hidden-child {
  height: 0px;
  overflow: hidden;
  transition: height 0.6s ease;
}