JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<div id="box1" name="box1" style="background:#3d70a3;height:30px;width:100px;margin:3px;color:white;">
    <span id="minus1">&nbsp;<b>-</b></span><span id="plus1">&nbsp;<b>+</b></span> Category 1 
    <P id="cat2a">Category 2<br>Category 3<br>Category 4<br>Category 5
    
    </p>
     
  
</div>
<div  id="box2"  name="box2" style="background:#3d70a3;height:30px;width:100px;margin:3px;color:white;">  <span id="minus2">&nbsp;<b>-</b></span><span id="plus2">&nbsp;<b>+</b></span> Category 1 <p id="cat2b">Category 2<br>Category 3<br>Category 4<br>Category 5</p>

</div>
<div  id="box3"  name="box3" style="background:#3d70a3;height:30px;width:100px;margin:3px;color:white;">  <span id="minus3">&nbsp;<b>-</b></span><span id="plus3">&nbsp;<b>+</b></span> Category 1 <p id="cat2c">Category 2<br>Category 3<br>Category 4<br>Category 5</p>
</div>

CSS

P {
    font-size:small;
margin-left: 20px;
}

DIV {
    font-size:medium;
margin-left: 20px;
}

JavaScript

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

       
       
       
       
       
       $("#btn5").click(function(){
        $("h1, h2, p").toggleClass("blue");
    });
       $("#btn6").click(function(){
       var val2 = $("[Name='t1']").val()
  ...