JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<div class="ao-tabs">
  <div class="ao-tab">
    <input type="checkbox" id="chck1" />
    <label class="ao-tab-label" for="chck1"><span class="ao-icon"></span>Item 1</label>
    <div class="ao-tab-contentWrap">
      <div class="ao-content" id="test">
        <p>Lorem donec. non Vada diam leo aute Excepteur nunc cupidatat porttitor, ipsum consequat. malesuada malesuada. Duis lectus pulvinar id donec Lorem sed malesuada magna est quisque. diam. morbi. Leo cillum qui proin viverra dolor et amet,.</p>
<p>Culpa Pharetra senectus gravida culpa varius sed sit vel. donec. dictumst quisque quisque non. viverra. Consectetaur Quis ut. quisque amet id Eget et. Magna elit, dolore id commodo vel. sed elementum. et elementum. dolor. Turpis vel senectus Duis Sit porttitor, diam sint Risus laboris. Occaecat aute varius elit, et egestas. habitasse dolor bibendum. Rutrum ex viverra varius urna enim ut. laborum donec. enim Duis irure gravida in Lectus.</p>
<p>Nulla fames rutrum Nibh irure at porttitor, at velit Amet turpis do platea Hac venenatis. Amet hendrerit tempor Risus ad bibendum. Proin non deserunt dolore aliquet ea Ultricies ea tempor at nisi Eget ac fugiat. Aute convallis minim vel. et tristique arcu ac et lectus nunc ad dictumst enim vulputate.</p>
<p>Integer pariatur. Lectus sunt minim nostrud lorem vel. Turpis ullamco Netus sed integer rutrum non. non viverra leo ullamco. Malesuada platea a. ipsum nulla habitasse malesuada adipiscing nulla habitasse cupidatat et. Hendrerit ipsum a. rutrum tempor ipsum eu lectus varius veniam, malesuada elementum. Eu vel. lorem magna varius nostrud nulla leo.</p>
<p>Non. morbi convallis lectus pariatur. Excepteur sed in malesuada. Ex bibendum luctus morbi consequat. Pharetra egestas. aliquet nostrud elit, lorem lorem lectus Lorem. Aute adipisicing donec. commodo fames leo et ipsum. Vel dolor culpa ac urna a. esse quisque Hac morbi pulvinar lorem. In dolore ut urna tristique gravida ut Quis. Amet leo dictumst laboris ac...

CSS

.ao-tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.ao-tabs {
}

.ao-tab {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  box-shadow:
    rgb(0 0 0 / 12%) 0px 1px 2px,
    rgb(0 0 0 / 24%) 0px 1px 1px;
  margin-bottom: 20px;
  background: #fff;
}

.ao-tab-label {
  display: flex;
  justify-content: space-between;
  padding: 1em;
  font-weight: bold;
  cursor: pointer;
  position: relative;
}

.ao-tab-label:hover {
  background: #eee;
}


.ao-tab-contentWrap {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 20px; 
  background: white;
  transition: grid-template-rows 0.35s ease;
}

.ao-content {
  overflow: hidden;
  padding: 20px;
}

.ao-icon {
    width: 20px;
    height: 20px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    right: 21px;
}

.ao-tab input + .ao-tab-label .ao-icon:before{
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  margin-left: -2px;
}
.ao-tab input + .ao-tab-label .ao-icon:after{
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;
  margin-top: -2px;
}
.ao-tab input + .ao-tab-label .ao-icon:before, .ao-tab input + .ao-tab-label .ao-icon:after {
    content: "";
    position: absolute;
    background-color: #000;
    transition: transform 0.25s ease-out;
}

.ao-tab input:checked + .ao-tab-label .ao-icon::before {
  transform: rotate(90deg);
}
.ao-tab input:checked + .ao-tab-label .ao-icon::after {
  transform: rotate(180deg);
}

.ao-tab input:checked ~ .ao-tab-contentWrap {
    grid-template-rows: 1fr;
}

JavaScript

const element = document.getElementById('test');
const totalHeight = element.offsetHeight;
console.log(totalHeight); // Example: 100