Bootsstrap Base page

Jquery disable single column

by Julian

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div class="container">
  <table class="table" width="100%;">
    <tbody>
      <tr>

        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
      </tr>

      <tr class="accordion">
        <td>data</td>
        <td>data</td>
        <td>data</td>
          <td class="non-clickable"><a href="#" class="myButton">Play</a></td>

      </tr>
      <tr class="hidden-row">
        <td colspan="12">

          <div class="row">
            <div class="col-xs-12">
              <h4> More data hidden here</h4>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

JavaScript

$(document).ready(function() {
  $(function() {
    var $table = $('.table');
    $table.find('.hidden-row').hide();

    $table.find('.accordion').click(function(e) {
    if ($(e.target).hasClass('myButton') || $(e.target).hasClass('non-clickable')) {
      return false;
    }
   
      $table.find('.accordion').not(this).nextAll('.hidden-row:first').fadeOut(500);
      $(this).nextAll('.hidden-row:first').slideToggle("slow");
     
    });
  });
});