jQuery addClass example

Change class name on click in jQuery

HTML

<div id="barra1">
  <div id="colorAzul"></div>
</div>
<p>
<button id="subirW">Aumentar Barra</button>
</p>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#barra1 {
  background: #fff;
  border-radius: 4px;
  padding: 5px;
  font-size: 25px;
  text-align: left;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
  height: 32px;
}
#colorAzul {
  position: static;
  float:left;
  background: #1E90FF;
  padding: 1px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 0px;
  height: 30px;
}

JavaScript

// find elements
var azul = $("#colorAzul");
var subirW = $("#subirW");

azul.css("width","30%");

subirW.click(function() {
  azul.css("width","80%");
});