JSFiddle - React, Tailwind, and code Playground

by alan_omar

HTML

<div id="coding" class="larger">
<button onclick="dosomething()">Click Me</button>
</div>
<div id = "coding2">
</div>

CSS

#coding {
  width: 50%;
  border: 1px solid black;
  height: 300px;
  position:absolute;
  left:0;
  z-index:1;
  overflow:visible;
  background:yellow;
}


#coding2 {
  border: 1px solid black;
  height: 300px;
  width: 49%;
  position:absolute;
  right:0;
  z-index:0;
  background:blue;
}
button {
  width:70px;
}

JavaScript

function dosomething() {
  if($('#coding').width() > 0){
  	$('#coding').width('0')
    $('#coding2').width('100%')
  }
  else {
  	$('#coding').width('50%')
    $('#coding2').width('49%')
  }
  //$('#coding').toggleClass('larger')
 	 //if($('#coding').hasClass('larger')){
   		
   //}
   //$('#coding').width('0')
   //$('#coding2').width('100%')
 }