JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<table class="layout"><tbody><tr class="ui-sortable"><td data-header="false" data-background-color="" data-font-color="" data-align="left" data-colspan="1" data-width="100" data-height="100" colspan="1" width="100%" style="height:100px; text-align: left; background-color: !important; color: !important; " class="ui-droppable ui-sortable"></td></tr></tbody></table><table class="layout expanding-header"><tbody><tr class="ui-sortable"><td data-header="false" data-background-color="" data-font-color="" data-align="left" data-colspan="1" data-width="50" data-height="100" colspan="1" width="50%" style="height:100px; text-align: left; background-color: !important; color: !important; " class="ui-droppable ui-sortable"></td><td data-header="false" data-background-color="" data-font-color="" data-align="left" data-colspan="1" data-width="50" data-height="100" colspan="1" width="50%" style="height:100px; text-align: left; background-color: !important; color: !important; " class="ui-droppable ui-sortable"></td></tr></tbody></table><table class="layout"><tbody><tr class="ui-sortable"><td data-header="false" data-background-color="" data-font-color="" data-align="left" data-colspan="1" data-width="50" data-height="100" colspan="1" width="50%" style="height:100px; text-align: left; background-color: !important; color: !important; " class="ui-droppable ui-sortable"></td><td data-header="false" data-background-color="" data-font-color="" data-align="left" data-colspan="1" data-width="50" data-height="100" colspan="1" width="50%" style="height:100px; text-align: left; background-color: !important; color: !important; " class="ui-droppable ui-sortable"></td></tr></tbody></table>
<table class="layout"><tbody><tr class="ui-sortable"><td data-header="false" data-background-color="" data-font-color="" data-align="left" data-colspan="1" data-width="100" data-height="100" colspan="1" width="100%"...

CSS

.layout{
margin: 40px;
border: solid 1px #ccc;
background-color: #eee;
width: calc(100% - 88px);
position: relative;
}
.layout.expanding-header{
  cursor: pointer;
}
.layout.expanding-header:after{
  content: "\203A";
  display:block;
  position: absolute;
  color: #fff;
  transform: rotate(90deg) scale(0.6);
  font-size: 32px;
  bottom: 0px;
  right: 0px;
  line-height: 13px;
  background-color:#999;
  padding:10px;
  text-align:center;
  width: 20px;
  height: 20px;
}
.layout.expanding-header.expanded:after{
  transform: rotate(-90deg) scale(0.6);
  right: 0px;
  bottom: 0px;
}

JavaScript

var inExpansion = false;
var expandingHeader = [];
var expandingHeaderIndex = -1;

$('.layout').each(function(){

	var t = $(this);

  if(t.hasClass('expanding-header')){
  
  	expandingHeaderIndex++;
    
  	expandingHeader[expandingHeaderIndex] = {
    	element: t,
      subElements: []
    };
    inExpansion = true;
    
  } else if(inExpansion){
  
  	t.addClass('subElement');
  	t.hide();
  
  	expandingHeader[expandingHeaderIndex].subElements.push(t);
  
  }

});

for(let j=0;j<expandingHeader.length;j++){

console.log("expandingHeader[j]",expandingHeader[j]);

	 expandingHeader[j].element.click(function(){
    
      for(let i=0;i<expandingHeader[j].subElements.length;i++){
      
      	if(expandingHeader[j].element.hasClass('expanded')){
        
        	expandingHeader[j].subElements[i].hide(200);
        
        } else {
        
        	expandingHeader[j].subElements[i].show(200);
        
        }
      	
      }
      
     
      
      expandingHeader[j].element.toggleClass('expanded');
    
    });

}