animate auto resize

by Ezapp

HTML

<div class="card-header" id="headingOne">
  <div id="CSVStatus" class="sideCard"></div>
  <br><br><br><div id="CSVBtn" type="button">Click here</div>
</div>

CSS

#CSVStatus{
  background-color: #6c757d;
  float:left;
  height:36px;
  padding:5px;
  min-height: 25px;
  min-width: 25px;
  transition: background-color ease-in 1s, width ease-in 1s;
}

#CSVBtn{
  background-color:red;
  height: 20px;
  width: 80px;
  padding:15px;
}

JavaScript

var status = 1;
$(CSVBtn).on("click",function(){
  //success
  if(status == 1){
    $('#CSVStatus').css("background-color","#28a745");
    $('#CSVStatus').text("Uploaded");
    status++;
  }
  //warning
  else if(status == 2){
    $('#CSVStatus').css("background-color","#ffc107");
    $('#CSVStatus').text("Uploaded, but no config found");
    status = 1;
  }
});