jQuery addClass example

Change class name on click in jQuery

by Dmitri Ganenco

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<div id="Applications" class="panel panel-primary" style="width:850px;    margin:0 auto; margin-top:10px;">
  <div class="panel-heading">
    <h3 class="panel-title"><strong>Applications</strong></h3>
  </div>
  <div class="panel-body">
    <table width="825" border="0" class="table table-striped">
      <tbody>
        <tr>
          <td>
            <select class="selectapps selectapps2" id="ApplicationsList" name="ApplicationsList" multiple="multiple" style="width:99%;">
                <option value="CNKronos" >CNKronos</option>
                <option value="Network2">Drive</option>
                <option value="Network">Email</option>
                <option value="OnBase">OnBase</option>
               </select>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

DIVS

<div id="CNKronos" class="panel panel-primary selectapps2" style="width:850px; margin:0 auto; margin-top:10px;">
  <div class="panel-heading">
    <h3 class="panel-title"><strong>CNKronos</strong></h3>
  </div>
  <div class="panel-body">
    <table width="825" border="0" class="table table-striped">
      <tbody>
        <tr>
          <td>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<div id="Network2" class="panel panel-primary selectapps2" style="width:850px; margin:0 auto; margin-top:10px;">
  <div class="panel-heading">
    <h3 class="panel-title"><strong>Drive</strong></h3>
  </div>
  <div class="panel-body">
    <table width="825" border="0" class="table table-striped">
      <tbody>
        <tr>
          <td>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<div id="Network" class="panel panel-primary selectapps2" style="width:850px; margin:0 auto; margin-top:10px;">
  <div class="panel-heading">
    <h3 class="panel-title"><strong>Email</strong></h3>
  </div>
  <div class="panel-body">
    <table...

JavaScript

$(document).ready(function() {
  $('.selectapps').select2();
  $('#CNKronos').hide();
  $('#Network2').hide();
  $('#Network').hide();
  $('#OnBase').hide();
  var idSelectors = ["CNKronos", "Network2", "Network", "OnBase"];

  $('#ApplicationsList').change(function(e) {
    var thisValArray = $(this).val();
    idSelectors.forEach(function(idSelector) {
      $('#' + idSelector).toggle(thisValArray.indexOf(idSelector) === -1);
    });

  });
});