legends

Change class name on click in jQuery

by Murali Kaliappan

HTML

<div class="legend-parent">  

    <div> <span class="avg-legend">------</span> Average</div>
    <div><span class="opt-legend">------</span> Optimum</div>
    
    <div class="legend-1">    
    </div>
    <span class="legend-text">Optimum (+/- 1 Std. Dev.) </span>  
  
  
    <div class="legend-2">    
    </div>
    <span>Deviated Points Avg (+/- 1 Std. Dev.)</span>    
  
  
</div>

CSS

.legend-parent {
   display: block;
}

.legend-1 {
  width: 30px;
  height: 15px;
  background-color: #f8d4d4;
  display: inline-block;
  margin: -3px 5px -3px 20px;
  border: 1px solid #d9c8ca;
}

.legend-2 {
  width: 30px;
  height: 15px;
  background-color: #c2f2c2;
  display: inline-block;
  margin: -3px 5px -3px 20px;
  border: 1px solid #b3d3c7;
 }

 .avg-legend {
   color: red;
   font-weight: bold;
   font-size: 25px;
   letter-spacing: -2px;
  }

  .opt-legend {
   color: green;
   margin-top: 10px;
   font-weight: bold;
   font-size: 25px;
   letter-spacing: -2px;
  }

  .legend-parent div {
   display: inline-block;
 }

  div .opt-legend {
   margin-left: 20px;
  }