Hide/Show Columns in an HTML Table (with multiple column in the header)

$(function() {
  // on click
  $('.hide-column').click(HideColumns)
  
  // on init
  $('.hide-column').eq(0).trigger( "click" );

  function HideColumns() {
    var $el = $(this);
    var $cell = $el.closest('th,td')
    var $table = $cell.closest('table')

    var colIndex = 0;
    var colSpan = 0;

    $cell.parent().children().each(function(index) {
      if ($(this).is($cell)) {
        colSpan = parseInt($cell.attr("colspan") || 1);
        return false;
      } else {
        colIndex += parseInt($(this).attr("colspan") || 1);
      };
    });

    // find and hide col index
    for (var i = colIndex; i < (colIndex + colSpan); i++) {
      $table.find("tbody tr, thead :nth-child(3)")
        .children(":nth-child(" + (i + 1) + ")")
        .addClass('hide-col');
    };
    
    //always show first header
    $table.find("thead :nth-child(1)").children().removeClass('hide-col');
    
    //hide clicked cell
    $cell.addClass('hide-col');

    // show restore footer
    $table.find(".footer-restore-columns").show()
  }

  // restore columns footer
  $(".restore-columns").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".footer-restore-columns").hide()
    $table.find("th, td")
      .removeClass('hide-col');

  })

  $('[data-toggle="tooltip"]').tooltip({
    trigger: 'hover'
  })

})

body {
  padding: 15px;
}

.table-hideable td,
.table-hideable th {
  width: auto;
  transition: width .5s, margin .5s;
}

.btn-condensed.btn-condensed {
  padding: 0 5px;
  box-shadow: none;
}


/* use class to have a little animation */

.hide-col {
  width: 0px !important;
  height: 0px !important;
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

<!DOCTYPE html>
<html>

<head>

  <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>

<body>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


  <table class="table table-condensed table-hover table-bordered table-striped table-hideable">

    <thead>
      <tr>
        <th colspan="4">

          TOP </th>
      </tr>
      <tr>
        <th colspan="2"> <button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column" data>
          <i class="fa fa-eye-slash"></i>  
        </button> A </th>
        <th colspan="2"> <button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
          <i class="fa fa-eye-slash"></i>  
        </button> B
        </th>

      </tr>
      <tr>
        <th>

          AA </th>
        <th class="hide-col">

          AB </th>
        <th>

          BB </th>
        <th>

          BC </th>

      </tr>
    </thead>
    <tbody>

      <tr>
        <td>Home</td>
        <td>Index</td>
        <td>ActionResult</td>
        <td>Authorize</td>

      </tr>

      <tr>
        <td>Client</td>
        <td>Index</td>
        <td>ActionResult</td>
        <td>Authorize</td>

      </tr>

      <tr>
        <td>Client</td>
        <td>Edit</td>
        <td>ActionResult</td>
        <td>Authorize</td>

      </tr>

    </tbody>
    <tfoot class="footer-restore-columns">
      <tr>
        <th colspan="4"><a class="restore-columns" href="#">Some columns hidden - click to show all</a></th>
      </tr>
    </tfoot>
  </table>