<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/css/foundation.min.css" integrity="sha256-GSio8qamaXapM8Fq9JYdGNTvk/dgs+cMLgPeevOYEx0= sha384-wAweiGTn38CY2DSwAaEffed6iMeflc0FMiuptanbN4J+ib+342gKGpvYRWubPd/+ sha512-QHEb6jOC8SaGTmYmGU19u2FhIfeG+t/hSacIWPpDzOp5yygnthL3JwnilM7LM1dOAbJv62R+/FICfsrKUqv4Gg==" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/js/foundation.min.js" integrity="sha256-mRYlCu5EG+ouD07WxLF8v4ZAZYCA6WrmdIXyn1Bv9Vk= sha384-KzKofw4qqetd3kvuQ5AdapWPqV1ZI+CnfyfEwZQgPk8poOLWaabfgJOfmW7uI+AV sha512-0gHfaMkY+Do568TgjJC2iMAV0dQlY4NqbeZ4pr9lVUTXQzKu8qceyd6wg/3Uql9qA2+3X5NHv3IMb05wb387rA==" crossorigin="anonymous"></script>

<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>May 15</td>
      <td><a href="https://get.foundation/index.html" target="_blank" title="Zurb Foundation">Should open Foundation home page</a></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>Instead it opens and closes the expand row</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;
}

.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;
  }
}

$('[data-open-details]').click(function (e) {
  e.preventDefault();
  $(this).next().toggleClass('is-active');
  $(this).toggleClass('is-active');
});