jQuery toggleClass example

Toggle class name on click in jQuery

by tristevenpinto

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.3.1/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.3.1/css/fixedColumns.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap.min.js"></script>
<div class="panel-body" style="padding: 10px 0px 10px 0px; border-bottom: 1px solid #ccc;">
  <div class="col-md-12">
    <div class="table-responsive">
      <table>
        <tbody>
          <tr>



            <td>
              <span style="display:inline-block;width:150px;width: 140px;">Hide A</span>
            </td>
            <td>
              <input id="chkA" onclick="ShowHide();" type="checkbox" />
            </td>

            <td>
              <span style="display:inline-block;width:150px;width: 220px;">Hide U</span>
            </td>
            <td>
              <input id="chkU" onclick="ShowHide();" type="checkbox" />
            </td>


          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home" onclick="OpenTab(0); return false;">Home</a></li>
  <li><a data-toggle="tab" onclick="OpenTab(1); return false;" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" onclick="OpenTab(2); return false;" href="#menu2">Menu 2</a></li>
  <li><a data-toggle="tab" onclick="OpenTab(3); return false;"...

CSS

table th, table td {
    border: 1px solid #fff !important;
}
table th
{
      background-color: #e6e7e8;
}

JavaScript

$(document).ready(function() {
   OpenTab(0);
 });

 function OpenTab(tab) {
   selectedtab = tab;
   switch (tab) {
     case 0:
       Bind0();
       break;
     case 1:
       Bind1();
       break;
     case 2:
       Bind2();
       break;
     case 3:
       Bind3();
       break;
   }
 }
 var selectedtab = 0;

 function ShowHide() {
   var chkA = $("[id$='chkA']").is(":checked");
   var chkU = $("[id$='chkU']").is(":checked");
   switch (selectedtab) {
     case 0:
       tbl0.columns([1,2]).visible(!chkA, !chkA);
       tbl0.columns([3,4]).visible(!chkU, !chkU);
       tbl0.columns.adjust().draw(false);
       break;
     case 1:
       tbl1.columns([3,4,7,8]).visible(!chkA, !chkA);
       tbl1.columns([1,5]).visible(!chkU, !chkU);
        $("#example1").css("width", chkA ? "100%" : "150%");
       tbl1.columns.adjust().draw(false);
       break;
     case 2:
       tbl2.columns([1,2]).visible(!chkA, !chkA);
       tbl2.columns([3,4]).visible(!chkU, !chkU);
       tbl2.columns.adjust().draw(false);
       break;
     case 3:
       tbl3.columns([1,2]).visible(!chkA, !chkA);
       tbl3.columns([3,4]).visible(!chkU, !chkU);
       tbl3.columns.adjust().draw(false);
       break;
   }
 }
 var tbl0 = null;

 function Bind0() {
   if (tbl0 == null) {
     tbl0 = $("#example0").DataTable({
       processing: true,
       responsive: true,
       serverSide: true,
       ajax: {
         "url": "https://next.json-generator.com/api/json/get/41sW6TAyK?delay=5000",
         "dataSrc": "",

       },
       paging: false,
       searching: false,
       info: false,
       scrollY: "300px",
       scrollCollapse: true,
       ordering: false,
       columns: [{
           'data': 'Name'
         },
         {
           'data': 'Currency'
         },
         {
           'data': 'ActualRecordELocal'
         },
         {
           'data': 'ActualRecordE'
         },
         {
           'data': 'ActualRecordUnELocal'
         },
         {
           'data':...