<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');
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.