Vertical Table Ticker

Vertical Table Ticker with Animation

by jockebq

HTML

<table>
  <tr class="active">
    <th>
      <div>CL</div>
    </th>
    <th>
      <div>Tech</div>
    </th>
    <th>
      <div>Descr.</div>
    </th>
    <th>
      <div>Status</div>
    </th>
    <th>
      <div>MW Exceeded</div>
    </th>
    <th>
      <div>Escalations</div>
    </th>
  </tr>
  <tbody>
    <tr>
      <td>
        <div>CL</div>
      </td>
      <td>
        <div>LTE/U1900/2G</div>
      </td>
      <td>
        <div>F2 Delete</div>
      </td>
      <td>
        <div>Completed</div>
      </td>
      <td>
        <div>No</div>
      </td>
      <td>
        <div>No</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>CL</div>
      </td>
      <td>
        <div>LTE/U1900/2G</div>
      </td>
      <td>
        <div>F2 Delete</div>
      </td>
      <td>
        <div>Completed</div>
      </td>
      <td>
        <div>Yes</div>
      </td>
      <td>
        <div>Yes</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>CL</div>
      </td>
      <td>
        <div>LTE/U1900/2G</div>
      </td>
      <td>
        <div>F2 Delete</div>
      </td>
      <td>
        <div>Completed</div>
      </td>
      <td>
        <div>Yes</div>
      </td>
      <td>
        <div>No</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>CL</div>
      </td>
      <td>
        <div>LTE/U1900/2G</div>
      </td>
      <td>
        <div>F2 Delete</div>
      </td>
      <td>
        <div>Completed</div>
      </td>
      <td>
        <div>YES</div>
      </td>
      <td>
        <div>YES</div>
      </td>
    </tr>
        <tr>
      <td>
        <div>CL</div>
      </td>
      <td>
        <div>LTE/U1900/2G</div>
      </td>
      <td>
        <div>F2 Delete</div>
      </td>
      <td>
        <div>Completed</div>
      </td>
      <td>
        <div>NO</div>
      </td>
      <td>
        <div>NO</div>
      </td>
    </tr>
  </tbody>
</table>


<table>
  <tr class="active">
    <th>
      <div>CL</div>
    </th>
    <th>
     ...

CSS

table {
  border-collapse: collapse;
}

tr {
  background: #eee;
}

tr,
td {
  padding: 0;
}

td,
th {
  border-right: 1px solid white;
}

tr td div {
  max-height: 0;
  padding: 0 10px;
  box-sizing: border-box;
  overflow: hidden;
  transition: max-height 0.3s, padding 0.3s;
}

tr.active td div {
  max-height: 100px;
  padding: 10px 10px;
  transition: max-height 0.6s, padding 0.6s;
  border-top: 1px solid #fff;

}

JavaScript

var wait = 2000;
start();
setInterval(function(){
	start();
},($("tr").length) * wait);
function start() {
  ticker().done(function() {
    //Animation Finished
  });
}

function ticker() {
  var up = $.Deferred();
  var down = $.Deferred();

  $("tr").get().forEach(function(li, index) {
      setTimeout(function() {
        $(li).addClass("active");
        up.resolve();
      },wait * index);

      setTimeout(function() {
        $(li).removeClass("active");
        down.resolve();
      }, wait * index + wait);
			});
      return $.when(up, down).done(function() {
        //Full Animation is complete
      }).promise();


}