jQuery addClass example

Change class name on click in jQuery

by Dhanck

HTML

<div>
  <fieldset class="majorpoints">
    <span class="majorpointslegend"># Records attempted</span>
    <span class="itemslegend">16</span>
    <div class="hiders" style="display:none">
      <ul>
        <li>cccc</li>
        <li></li>
      </ul>
    </div>
    </fieldset>
</div>
<div>
  <fieldset class="majorpoints">
    <span class="majorpointslegend"># Records successfully created with no warnings</span>
    <span class="itemslegend success">6</span>
    <div class="hiders success" style="display:none">
      <ul>
        <li>cccc</li>
        <li></li>
      </ul>
    </div>
    </fieldset>
</div>
<div>
  <fieldset class="majorpoints">
    <span class="majorpointslegend"># Records successfully created with warnings</span>
    <span class="itemslegend warning">4</span>
    <div class="hiders warning" style="display:none">
      <ul>
        <li>cccc</li>
        <li></li>
      </ul>
    </div>
    </fieldset>
</div>
<div>
  <fieldset class="majorpoints">
    <span class="majorpointslegend"># Records updated with no warnings </span>
    <span class="itemslegend">16</span>
    <div class="hiders" style="display:none">
      <ul>
        <li>cccc</li>
        <li></li>
      </ul>
    </div>
    </fieldset>
</div>
<div>
  <fieldset class="majorpoints">
    <span class="majorpointslegend"># Records updated with warnings</span>
    <span class="itemslegend success">8</span>
    <div class="hiders success" style="display:none">
      <ul>
        <li>cccc</li>
        <li></li>
      </ul>
    </div>
    </fieldset>
</div>
<div>
  <fieldset class="majorpoints">
    <span class="majorpointslegend"># Records skipped due to validation errors</span>
    <span class="itemslegend error">2</span>
    <div class="hiders error" style="display:none">
      <ul>
        <li>Row 3 - Column 3 | Account not found</li>
        <li>Row 5 - Column 1 | Document name already exists</li>
      </ul>
    </div>
    </fieldset>
</div>

CSS

.majorpoints {
    border: none;
    font-family: arial;
    font-size: 12px;
}
.itemslegend {
    float: right;
    font-weight: 600;
}
.majorpoints ul {
    list-style: none;
    line-height: 20px;
    padding: 5px 15px;
    margin: 0;
}
.error{
  color: red;
}
.success{
  color: green;
}
.warning{
  color: orange;
}

JavaScript

$('.majorpoints').click(function(){
    $(this).find('.hiders').toggle();
});