JSFiddle - React, Tailwind, and code Playground

HTML

<div class='features-container'>
	<div id='boxhead' class='sectionhead' onclick="ShowHideAll()">Show/Hide All</div>
	<div id='box1head' class='sectionhead' onclick="showHtmlDiv('box1')">Section Header #1</div>
		<div class='sectioncontent' id="box1">
	
			<div class='subsection-row'>
				<div class='subsection-col1a'>SECTION 1 COL 1</div>
				<div class='subsection-col2a'>COL 2</div>
				<div class='subsection-col3a'>COL 3</div>
			</div>
		
			<div class='subsection-row'>
				<div class='subsection-col1b'>SECTION 1 COL 2</div>
				<div class='subsection-col2b'>COL 2</div>
				<div class='subsection-col3b'>COL 2</div>
			</div>
		
			<div class='subsection-row'>
				<div class='subsection-col1a'>SECTION 1 COL 1</div>
				<div class='subsection-col2a'>COL 2</div>
				<div class='subsection-col3a'>COL 3</div>
			</div>
			
		</div>
  <div id='box2head' class='sectionhead' onclick="showHtmlDiv('box2')">Section Header #2</div>
		<div class='sectioncontent' id="box2">
	
			<div class='subsection-row'>
				<div class='subsection-col1a'>SECTION 2 COL 1</div>
				<div class='subsection-col2a'>COL 2</div>
				<div class='subsection-col3a'>COL 3</div>
			</div>
		
			<div class='subsection-row'>
				<div class='subsection-col1b'>SECTION 2 COL 2</div>
				<div class='subsection-col2b'>COL 2</div>
				<div class='subsection-col3b'>COL 2</div>
			</div>
		
			<div class='subsection-row'>
				<div class='subsection-col1a'>SECTION 2 COL 1</div>
				<div class='subsection-col2a'>COL 2</div>
				<div class='subsection-col3a'>COL 3</div>
			</div>
			
		</div>

	<div id='box3head' class='sectionhead' onclick="showHtmlDiv('box3')">Section Header #3</div>
		<div class='sectioncontent' id="box3">
	
			<div class='subsection-row'>
				<div class='subsection-col1a'>SECTION 3 COL 1</div>
				<div class='subsection-col2a'>COL 2</div>
				<div class='subsection-col3a'>COL 3</div>
			</div>
		
			<div class='subsection-row'>
				<div class='subsection-col1b'>SECTION 3 COL 2</div>
				<div...

CSS

html, body {
	margin:0px; 
	padding:0px;
}

.features-container {
	float: left;
	max-width: 500px;visi
	height: auto;
	
}

#box1 { visibility: hidden; height:0px; transition: height 1s; }
#box2 { visibility: hidden; height:0px; transition: height 1s; }
#box3 { visibility: hidden; height:0px; transition: height 1s; }
#box4 { visibility: hidden; height:0px; transition: height 1s; }
#boxhead { background-color: #224488; }
#box1head { background-color: #113366; }
#box2head { background-color: #113366; }
#box3head { background-color: #113366; }
#box4head { background-color: #113366; }

.sectionhead {
	position: relative;
	float: left; 
	color: #fff;
	width: 500px;
	height: 50px;
}

.sectioncontent {
	position: relative;
	float: left; 
	color: #fff;
	width: 500px;
	height: auto;
}

.subsection-row {
	position: relative;
	float:left;
	width: 500px;
}

.subsection-col1a {
	position: relative;
	float: left; 
	color #000;
	background-color: #666;
	width: 300px;
	height: 100px;
}
.subsection-col2a {
	position: relative;
	float: left; 
	color #000;
	background-color: #666;	
	width: 100px;
	height: 100px;
}
.subsection-col3a {
	position: relative;
	float: left; 
	color #000;
	background-color: #666;
	width: 100px;
	height: 100px;
}

.subsection-col1b {
	position: relative;
	float: left; 
	color #000;
	background-color: #888;
	width: 300px;
	height: 100px;
}
.subsection-col2b {
	position: relative;
	float: left; 
	color #000;
	background-color: #888;	
	width: 100px;
	height: 100px;
}
.subsection-col3b {
	position: relative;
	float: left; 
	color #000;
	background-color: #888;
	width: 100px;
	height: 100px;
}

JavaScript

function ShowHideAll() {
  var box1 = document.getElementById("box1")
  var box2 = document.getElementById("box2")
  var box3 = document.getElementById("box3")
  var box4 = document.getElementById("box4")

  if (box1.style.height === "0px") {
    box1.style.visibility = "visible"
    box2.style.visibility = "visible"
    box3.style.visibility = "visible"
    box4.style.visibility = "visible"
    box1.style.height = "300px"
    box2.style.height = "300px"
    box3.style.height = "300px"
    box4.style.height = "300px"
    document.getElementById("box1head").style.backgroundColor = "#3366FF"
    document.getElementById("box2head").style.backgroundColor = "#3366FF"
    document.getElementById("box3head").style.backgroundColor = "#3366FF"
    document.getElementById("box4head").style.backgroundColor = "#3366FF"
  } else {
    box1.style.height = "0px"
    box2.style.height = "0px"
    box3.style.height = "0px"
    box4.style.height = "0px"
    document.getElementById("box1head").style.backgroundColor = "#113366"
    document.getElementById("box2head").style.backgroundColor = "#113366"
    document.getElementById("box3head").style.backgroundColor = "#113366"
    document.getElementById("box4head").style.backgroundColor = "#113366"
  }
}

function showHtmlDiv(toggable) {
  var htmlShow = document.getElementById(toggable)
  var HeadID = "head"
  var newHeadID = toggable + HeadID
  var htmlShowHead = document.getElementById(newHeadID)
  if (htmlShow.style.height === "0px") {
    htmlShow.style.visibility = "visible"
    htmlShow.style.height = "300px"
    htmlShowHead.style.backgroundColor = "#3366FF"
  } else {
    htmlShow.style.height = "0px"
    htmlShowHead.style.backgroundColor = "#113366"
  }
}