JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<div id="divBody">
  <div class="divSection">
    <div class="divTitle dRotate">Text 1</div>
    <div class="divContents">Test</div>
  </div>
  <div class="divSection">
    <div class="divTitle dRotate">Text 1</div>
    <div class="divContents">Test</div>
  </div>
  <div class="divSection divContentsVis">
    <div class="divTitle dRotate">Text 1</div>
    <div class="divContents">Test</div>
  </div>  
  <div class="divSection">
    <div class="divTitle dRotate">Text 1</div>
    <div class="divContents">Test</div>
  </div>
  <div class="divSection">
    <div class="divTitle dRotate">Text 1</div>
    <div class="divContents">Test</div>
  </div>
  <div class="divSection">
    <div class="divTitle dRotate">Text 1</div>
    <div class="divContents">Test</div>
  </div>  
</div>

CSS

#divBody {
  width:100%;
  display:flex;
}

.divTitle {
  cursor:pointer;
}

.divSection {
  display:flex;
}
.divContents {
  display:none;
  background-color:grey;
  flex-grow:1;

}

.divContentsVis {
    flex-grow:1;
}

.divContentsVis .divContents {
  display:block;
}

.dRotate {
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  height: 250px;
  width: 25px;
  border: 1px solid #000000;
  background-color:pink;
  writing-mode: vertical-lr;
  transform: scale(-1, -1);
}

JavaScript

$(".divTitle").on("click", function () {
	$(".divContentsVis").removeClass("divContentsVis");
  $(this).parent().addClass("divContentsVis");
});