jQuery addClass example

Change class name on click in jQuery

by Roger Sanchez

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

<div id="report-main">
<div id="dcir">
    <div class="box-content">
       <h2 class="vertical-align">
        DCIR
      </h2>
    </div>
    <div class="box-content">
      <div class="box-small">
        <p class="vertical-align">Alto</p>
      </div>
      <div class="box-small">
        <p class="vertical-align">Medio</p>
      </div>
      <div class="box-small">
        <p class="vertical-align">Bajo</p>
      </div>
      
      <span class="top">>=80%</span>
      <span class="bottom">>=50%</span>
    </div>
</div>
<div class="arrow-vertical-top">
    <div></div>
</div>
 <div id="Report">
   <div class="box-s1">
     <div id="highDigital-lowPotential" class="rectangle-horizontal bg-color-crema">
        <p class="txt-center txt-color-black txt-bold">
           Alto Digital &  <br \> Bajo Potencial 
        </p>
     </div>
     <div class="None rectangle-vertical bg-color-black">
        <p class="vertical-align txt-color-white">
           Sin Registros
        </p>
     </div>
     <div id="lowDigital-lowPotential" class="rectangle-vertical bg-color-green">
         <p class="txt-center txt-color-black txt-bold txt-middle-align">
           Bajo Digital & <br \> Bajo Potencial 
        </p>
     </div>

   </div>
   <div class="box-s2">
     <div class="highDigital-highPotential rectangle-horizontal bg-color-yellow">
        <p class="txt-center txt-bold">
           Alto Digital &  <br \> Alto Potencial 
        </p>
     </div>
     <div class="lowDigital-highPotential square bg-color-red">
         <p class="txt-center txt-color-white txt-bold">
           Bajo Digital &  <br \> Alto Potencial 
        </p>
     </div>
   </div>
</div>
<div class="arrow-horizontal-left">
    <div></div>
</div>
<div id="wai">
    <div class="box-content">
      <div class="box-small">
        <p class="">Cero</p>
      </div>
      <div class="box-small">
        <p...

SCSS

#report-main {
    font-family:arial;
    width: 681px;
    border: 1px solid #c00;
    overflow: hidden;
    padding: 20px;
}

#dcir,#wai{position:relative;}
#dcir p, #wai p{color:#bababa;font-size:18px}
#dcir{
   border: 1px solid #c00;
   float:left;
   width: 60px;
   height: 285px;
   right: 22px;
}
#dcir h2{
    display: block;
    height: 284px;
    text-align: center;
    top: 0;
    /*border: 1px solid #c00;*/
}
#dcir span{
    position:absolute;
}
#dcir span.top{
    top: 87px;
    right: -24px;
}
#dcir span.bottom{
    top: 184px;
    right: -24px;
}

#dcir .box-content{
    float: left;
    height: 284px;
    /*border: 1px solid #ff4f68;*/
}
#dcir .box-small{
    height: 93px;
    /*border: 1px solid #ff4f68;*/
}


#wai{
   border: 1px solid #c00;
   float:left;
   width: 600px;
   height: 95px;
}
#wai h2{
    display: block;
     width: 597px;
    text-align: center;
   /* border: 1px solid #c00;*/
}

#wai span{
    position:absolute;
}
#wai span.left{
    top: 6px;
    left: 136px;
}
#wai span.right{
    top: 6px;
    right: 287px;
}

#wai .box-content{
    float: left;
    height: 42px;
    /*border: 1px solid #ff4f68;*/
}
#wai .box-small{
    float: left;
    height: 40px;
    width: 147px;
    text-align: center;
   /* border: 1px solid #ff4f68;*/
}


#Report{
    float:left;
    border-right: 1px solid #fef3fe;
    width: 600px;
    height: 277px;
}

#Report .box-s1, #Report .box-s2{
  float:left;
  width: 300px;
  height: 250px;
  cursor:pointer;
      position: relative;
}

#Report .rectangle-horizontal{
   float: left;
   height: 80px;
   width: 300px;
}
#Report .square{
    height: 198px;
    width: 100%;
    float: left;
    position: relative;
}

.square p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

#Report .rectangle-vertical {
   float: left;
   width: 150px;
   height: 200px;
}
#Report .None p{
    font-weight:bold;
   ...