JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<main>
  <div class="header" data-toggle="1">HEADER</div>
  <div class="body" data-expand="1">
    <div>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil consequatur excepturi ea modi. Deserunt, nisi. Voluptatum animi, quidem fuga delectus sunt eligendi vitae cumque vel qui tempore at tempora, officia dolor asperiores consectetur error nulla aliquid similique culpa eveniet minus ad quo ipsa. Vitae sunt reiciendis, incidunt veritatis error! Vero.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error perspiciatis quidem beatae eligendi iure consequatur, ea asperiores. Facere eum natus dignissimos ea sunt quibusdam vel ipsum laboriosam autem molestias, soluta quos modi, possimus fuga magnam molestiae est voluptate. Dolorem ipsum dignissimos rem provident magni neque quo laborum quia, esse cumque?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error perspiciatis quidem beatae eligendi iure consequatur, ea asperiores. Facere eum natus dignissimos ea sunt quibusdam vel ipsum laboriosam autem molestias, soluta quos modi, possimus fuga magnam molestiae est voluptate. Dolorem ipsum dignissimos rem provident magni neque quo laborum quia, esse cumque?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error perspiciatis quidem beatae eligendi iure consequatur, ea asperiores. Facere eum natus dignissimos ea sunt quibusdam vel ipsum laboriosam autem molestias, soluta quos modi, possimus fuga magnam molestiae est voluptate. Dolorem ipsum dignissimos rem provident magni neque quo laborum quia, esse cumque?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error perspiciatis quidem beatae eligendi iure consequatur, ea asperiores. Facere eum natus dignissimos ea sunt quibusdam vel ipsum laboriosam autem molestias, soluta quos modi, possimus fuga magnam molestiae est voluptate. Dolorem ipsum dignissimos rem provident magni neque quo laborum quia, esse cumque?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error...

SCSS

body {
  margin: 0;
  padding: 0;
}

main {
  border: 1px solid #eee;
  min-height: 60vh;
  overflow-y: auto;
  width: 250px;
  display: flex;
  flex-direction: column;
  margin: 25px auto;
}

.header {
  background: grey;
  padding: 1rem;
}

.body {
  height: 0;
  transition: height 300ms ease-in-out;
  overflow-y: auto;
  flex: none;
 
  > div {
    padding: 1rem;
  }
}

JavaScript

const container = document.querySelector('main');
const headers = document.querySelectorAll('.header');
const panels = document.querySelectorAll('.body');

const headersHeight = headers[0].clientHeight * headers.length;
const containerHeight = container.clientHeight;

const totalHeight = containerHeight - headersHeight;
const panelHeight = totalHeight / panels.length;

headers.forEach(header => header.addEventListener('click', () => {
  panels.forEach(panel => {  
    if(panel.dataset.expand === header.dataset.toggle) {
    
      if(panel.hasAttribute('style')) {
          panel.removeAttribute('style');   
        return;
      }
  
      panel.style.height = `${panelHeight}px`;
    }
  });
}));