JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<!doctype html>
<title>val demo</title>

<div id="box1" name="box1" style="background:#3d70a3;height:30px;width:100px;margin:3px;color:white;">
    &nbsp;<span id="minus1"><b>-</b></span><span id="plus1"><b>+</b></span> Category 1
  
</div>
<div  id="box2"  name="box2" style="background:#3d70a3;height:30px;width:100px;margin:3px;color:white;">  
    &nbsp;<span id="minus2"><b>-</b></span><span id="plus2"><b>+</b></span> Category 1
</div>
<div  id="box3"  name="box3" style="background:#3d70a3;height:30px;width:100px;margin:3px;color:white;"> 
    &nbsp;<span id="minus3"><b>-</b></span><span id="plus3"><b>+</b></span> Category 1
</div>

   <script>
      
   $(document).ready(function(){
       $("#plus1,#plus2,#plus3,#minus1,#minus2,#minus3").css( 'cursor', 'pointer' );
       $("#minus1,#minus2,#minus3").hide();
       
    $("#plus1").click(function(){
       //var val2 = $("[Name='t1']").val()
       // var val3 = "[Name= " + val2 + "]" ;
       
       // $(val3).animate({height: "100px"});
       $("#box1").animate({height: "100px"});
       $("#plus1").hide();
       $("#minus1").show();
       
       
    });
    $("#minus1").click(function(){
       //var val2 = $("[Name='t1']").val()
       //var val3 = "[Name= " + val2 + "]" ;
        $("#box1").animate({height: "30px"});
        $("#plus1").show();
       $("#minus1").hide();
    });
       
      $("#plus2").click(function(){
       //var val2 = $("[Name='t1']").val()
       // var val3 = "[Name= " + val2 + "]" ;
       
       // $(val3).animate({height: "100px"});
       $("#box2").animate({height: "100px"});
       $("#plus2").hide();
       $("#minus2").show();
    });
    $("#minus2").click(function(){
       //var val2 = $("[Name='t1']").val()
       //var val3 = "[Name= " + val2 + "]" ;
        $("#box2").animate({height: "30px"});
        $("#plus2").show();
       $("#minus2").hide();
    });
    $("#plus3").click(function(){
       //var val2 = $("[Name='t1']").val()
       // var val3 =...

CSS

.blue {
    color: blue;
}
.Row
{
    display: table;
    width: 100%; /*Optional*/
    table-layout: fixed; /*Optional*/
    border-spacing: 10px; /*Optional*/
}
.Column
{
    display: table-cell;
    background-color: red; /*Optional*/
}