Table Expand

By Leah Callahan

F6
#
table interaction javascript show hide
How do I use This?

Table that features smooth expanding rows to show and hide further information.

HTML
<table class="table-expand">
  <thead>
    <tr class="table-expand-row">
      <th width="200">Date</th>
      <th>Number of items</th>
      <th class="text-right" width="150">Amount</th>
      <th width="150">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-expand-row" data-open-details>
      <td>August 15</td>
      <td>2 items</td>
      <td class="text-right">$0.50</td>
      <td>in progress <span class="expand-icon"></span></td>
    </tr>

    <tr class="table-expand-row-content">
      <td colspan="8" class="table-expand-row-nested">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque unde quaerat reprehenderit ipsa ipsam, adipisci facere repellendus impedit at, quisquam dicta optio veniam quia nesciunt, inventore quod in neque magni?</p>
      </td>
    </tr>

    <tr class="table-expand-row" data-open-details>
      <td>July 15</td>
      <td>4 items</td>
      <td class="text-right">$1.30</td>
      <td>scheduled <span class="expand-icon"></span></td>
    </tr>

    <tr class="table-expand-row-content">
      <td colspan="8" class="table-expand-row-nested">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque unde quaerat reprehenderit ipsa ipsam, adipisci facere repellendus impedit at, quisquam dicta optio veniam quia nesciunt, inventore quod in neque magni?</p>
      </td>
      </td>
    </tr>

    <tr class="table-expand-row" data-open-details>
      <td>June 15</td>
      <td>1 item</td>
      <td class="text-right">$0.10</td>
      <td>carried over <span class="expand-icon"></span></td>
    </tr>

    <tr class="table-expand-row-content">
      <td colspan="8" class="table-expand-row-nested">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque unde quaerat reprehenderit ipsa ipsam, adipisci facere repellendus impedit at, quisquam dicta optio veniam quia nesciunt, inventore quod in neque magni?</p>
      </td>
      </td>
    </tr>

    <tr class="table-expand-row" data-open-details>
      <td>May 15</td>
      <td>1 item</td>
      <td class="text-right">$0.10</td>
      <td>carried over <span class="expand-icon"></span></td>
    </tr>

    <tr class="table-expand-row-content">
      <td colspan="8" class="table-expand-row-nested">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque unde quaerat reprehenderit ipsa ipsam, adipisci facere repellendus impedit at, quisquam dicta optio veniam quia nesciunt, inventore quod in neque magni?</p>
      </td>
      </td>
    </tr>

    <tr class="table-expand-row" data-open-details>
      <td>April 15</td>
      <td>1 item</td>
      <td class="text-right">$0.10</td>
      <td>carried over <span class="expand-icon"></span></td>
    </tr>

    <tr class="table-expand-row-content">
      <td colspan="8" class="table-expand-row-nested">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque unde quaerat reprehenderit ipsa ipsam, adipisci facere repellendus impedit at, quisquam dicta optio veniam quia nesciunt, inventore quod in neque magni?</p>
      </td>
      </td>
    </tr>

    <tr class="table-expand-row" data-open-details>
      <td>March 15</td>
      <td>1 item</td>
      <td class="text-right">$0.10</td>
      <td>carried over <span class="expand-icon"></span></td>
    </tr>

    <tr class="table-expand-row-content">
      <td colspan="8" class="table-expand-row-nested">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque unde quaerat reprehenderit ipsa ipsam, adipisci facere repellendus impedit at, quisquam dicta optio veniam quia nesciunt, inventore quod in neque magni?</p>
      </td>
      </td>
    </tr>

    <tr class="table-expand-row" data-open-details>
      <td>February 15</td>
      <td>2 items</td>
      <td class="text-right">$1.20</td>
      <td>paid <span class="expand-icon"></span></td>
    </tr>

    <tr class="table-expand-row-content">
      <td colspan="8" class="table-expand-row-nested">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque unde quaerat reprehenderit ipsa ipsam, adipisci facere repellendus impedit at, quisquam dicta optio veniam quia nesciunt, inventore quod in neque magni?</p>
      </td>
      </td>
    </tr>

    <tr class="table-expand-row" data-open-details>
      <td>January 15</td>
      <td>5 items</td>
      <td class="text-right">$0.50</td>
      <td>carried over <span class="expand-icon"></span></td>
    </tr>

    <tr class="table-expand-row-content">
      <td colspan="8" class="table-expand-row-nested">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque unde quaerat reprehenderit ipsa ipsam, adipisci facere repellendus impedit at, quisquam dicta optio veniam quia nesciunt, inventore quod in neque magni?</p>
      </td>
      </td>
    </tr>

    <tr class="table-expand-row" data-open-details>
      <td>December 15</td>
      <td>2 items</td>
      <td class="text-right">$0.20</td>
      <td>carried over <span class="expand-icon"></span></td>
    </tr>

    <tr class="table-expand-row-content">
      <td colspan="8" class="table-expand-row-nested">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque unde quaerat reprehenderit ipsa ipsam, adipisci facere repellendus impedit at, quisquam dicta optio veniam quia nesciunt, inventore quod in neque magni?</p>
      </td>
      </td>
    </tr>

  </tbody>
</table>


.table-expand {
  margin-top: 5rem;

  td {
    color: $dark-gray;
  }

  tr {
    border: 1px solid $light-gray;
  }

  .text-right {
    padding-right: 3rem;
  }
}

.table-expand-row {
  &.is-active {
    .expand-icon::after {
      content: '-';
    }
  }

  .expand-icon::after {
    content: '+';
    float: right;
  }
}

// this is where the magic happens
.table-expand-row-content {
  display: none;
}

.table-expand-row-content {
  &.is-active {
    display: table-row;
    animation: fadeIn ease-in 1;
    animation-fill-mode: both;
    animation-duration: 0.5s;
  }
}

.table-expand-row-nested {
  background-color: $light-gray;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}



.table-expand {
  margin-top: 5rem;
}

.table-expand td {
  color: #8a8a8a;
}

.table-expand tr {
  border: 1px solid #e6e6e6;
}

.table-expand .text-right {
  padding-right: 3rem;
}

.table-expand-row.is-active .expand-icon::after {
  content: '-';
}

.table-expand-row .expand-icon::after {
  content: '+';
  float: right;
}

.table-expand-row-content {
  display: none;
}

.table-expand-row-content.is-active {
  display: table-row;
  -webkit-animation: fadeIn ease-in 1;
          animation: fadeIn ease-in 1;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
}

.table-expand-row-nested {
  background-color: #e6e6e6;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
JS
$('[data-open-details]').click(function (e) {
  e.preventDefault();
  $(this).next().toggleClass('is-active');
  $(this).toggleClass('is-active');
});

Similar Building Blocks

containers

Product Card

F6
by Rafi
containers

Card Reveal

F6
by Bryan Lewis
containers

Hover Product Card

F6
by Rafi