<div class="item" data-id="1">1
 <div class="item__body">
  <div class="item__content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum voluptates quo cum! Aliquid magnam eius quo iure at voluptas explicabo repellendus earum eum. Consectetur, iste, delectus omnis asperiores repudiandae blanditiis, neque ad odio dolorum sequi ducimus praesentium sapiente ab mollitia distinctio debitis labore? Quae delectus molestiae eius porro perferendis iure.</div>
 </div>
</div>


<div class="item" data-id="2">2
 <div class="item__body">
  <div class="item__content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita, adipisci? Deserunt debitis illo repellendus consequuntur natus earum possimus at sed.</div>
 </div>
</div>

<div class="item" data-id="3">3
 <div class="item__body">
  <div class="item__content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda officiis tempore laborum, hic veritatis nostrum facilis at velit eos, molestiae est excepturi? Est aspernatur, dolores similique nostrum necessitatibus quam sed corrupti magnam earum eveniet. Est, voluptates soluta porro eaque fugiat accusantium excepturi molestiae, quis ut quod repudiandae magni assumenda. Repellendus doloremque optio itaque sequi? Optio accusamus expedita quos debitis? Veniam fuga, accusantium eaque quibusdam ab error corrupti consequatur iste expedita a dolorum iusto, alias dignissimos id adipisci quasi. Error quisquam, quia adipisci ex quasi obcaecati asperiores soluta, hic aspernatur aperiam provident! Ipsum quod cumque hic ipsam minima fugit saepe perferendis?</div>
 </div>
</div>
.item {
  min-height: 20px;
  border: 2px solid green;
  margin-bottom: 15px;
}


.item__body {
  --height: 0; 
   height: var(--height);
   overflow: hidden;
 transition: height 1s;
}


const list = document.querySelectorAll(".item");

const onClick = (evt) => {
 const item = evt.currentTarget;
 item.classList.toggle("item--active");

 const itemBody = item.firstElementChild;
 const onResizeBody = () => {
  console.log(item.dataset.id);
  itemBody.style.setProperty("--height", `${itemBody.scrollHeight}px`);
 }

 if (item.classList.contains("item--active")) {
  onResizeBody();
  window.addEventListener("resize", onResizeBody);
 } else {
  itemBody.style.setProperty("--height", 0);
  window.removeEventListener("resize", onResizeBody);
 }
};

list.forEach((el) => el.addEventListener("click", onClick));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.