JSFiddle - React, Tailwind, and code Playground

by jakub_noga_antsolutions

HTML

<div class="container">
<div id="section-set" class="section-set">

</div>
</div>

CSS

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
}

.container {
  margin: 5px;
  overflow: auto;
  width: calc(100% - 10px);
  height: 500px;
}

.section-set {
  
}

.section {
   border: 1px solid black;
   border-top: 0;
}

.section-header {
  height: 50px;
  background: #cccabb;
  line-height: 50px;
  padding-left: 10px;
}

.section:first-child {
  border: 1px solid black;
}


.section-content {
  overflow: hidden;
}

.section-generated-content {
  background-color: #aabbcc;
}

JavaScript

let sectionSet = document.getElementById('section-set');

for(let i = 0; i < 5; i++) {
	let section = document.createElement("div")
  section.className = "section"
  
  let sectionHeader = document.createElement("div")
  sectionHeader.innerText = "Section " + i
  sectionHeader.className = "section-header"
  
  let sectionContent = document.createElement("div")
  sectionContent.className = "section-content"
  
  let randomContent = document.createElement("div")
  randomContent.style.width = "100%";
  randomContent.style.height = (Math.random() * 100 + 50) + "px"
  randomContent.className = "section-generated-content"
  
  sectionContent.appendChild(randomContent);
  
  section.appendChild(sectionHeader)
  section.appendChild(sectionContent)
  sectionHeader.addEventListener("click", e => toggleSection(sectionContent))
  
  sectionSet.appendChild(section)
}

function toggleSection(sectionContent) {

	console.log(sectionContent.style.height)
	if (sectionContent.style.height === "0px") {
  	sectionContent.style.height = null
  } else {
  	sectionContent.style.height = 0
  }
}