NiceSnippets.com
Bootstrap 4 Table Expandable Example
In this post we are giving you table row(tr) toggle demo. How do i collapse a table row in Bootstrap 4 ?. this is bootstrap collapse table row animation usign bootstrap-table-expandable jquery plugin. tthis is jQuery plugin for expandable bootstrap table rows.
We allows to free snippets of bootstrap collapse multiple table rows , you can download full code of bootstrap 4 collapse table row layout. Here in this post i will give you example of bootstrap collapse table row animation snippet and you will get simple code of html, css and jquery. In jQuery Plugin For Expandable Bootstrap Table Rows snippet i give you three tab with html, css and js, you can easily get code of jquery expand collapse table rows example layout.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Bootstrap Table Expandable Demo</title>
<link rel="stylesheet" type="text/css" href="custom.css">
<link href="https://fonts.googleapis.com/css?family=Archivo+Narrow" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Expandable-Bootstrap-Table-Rows/css/bootstrap-table-expandable.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Expandable-Bootstrap-Table-Rows/js/bootstrap-table-expandable.js"></script>
</head>
<body>
<div class="container main-section">
<div class="row">
<div class="col-lg-12 col-sm-12">
<h1 class="header pb-2"> jQuery Bootstrap 4 Table Expandable Demo <span class="blink">nicesnippets.com</span></h1>
<table class="table table-expandable table-bordered table-hover">
<thead class="thead-dark">
<tr>
<th>City</th>
<th>Population</th>
<th>Area</th>
<th>Official languages</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rajkot</td>
<td>306,939,000</td>
<td>9,826,630 km2</td>
<td>Hindi</td>
</tr>
<tr>
<td colspan="5"><h4>Information</h4>
<ul>
<li>This is a nice city</li>
<li>This is a beautiful</li>
<li>This is a beautiful nature</li>
</ul></td>
</tr>
<tr>
<td>Jamnagar </td>
<td>61,612,300</td>
<td>244,820 km2</td>
<td>Hindi</td>
</tr>
<tr>
<td colspan="5"><h4>Information</h4>
<ul>
<li>This is a nice city</li>
<li>This is a beautiful</li>
<li>This is a beautiful nature</li>
</ul></td>
</tr>
<tr>
<td>Ahmdavad</td>
<td>1,147,995,904</td>
<td>3,287,240 km2</td>
<td>Hindi, Hindi</td>
</tr>
<tr>
<td colspan="5"><h4>Information</h4>
<ul>
<li>This is a nice city</li>
<li>This is a beautiful</li>
<li>This is a beautiful nature</li>
</ul></td>
</tr>
<tr>
<td>Rampar</td>
<td>33,718,000</td>
<td>9,984,670 km2</td>
<td>Hindi, French</td>
</tr>
<tr>
<td colspan="5"><h4>Information</h4>
<ul>
<li>This is a nice city</li>
<li>This is a beautiful</li>
<li>This is a beautiful nature</li>
</ul></td>
</tr>
<tr>
<td>Tarkasar</td>
<td>82,060,000</td>
<td>357,021 km2</td>
<td>German</td>
</tr>
<tr>
<td colspan="5"><h4>Information</h4>
<ul>
<li>This is a nice city</li>
<li>This is a beautiful</li>
<li>This is a beautiful nature</li>
</ul></td>
</tr>
</tbody>
</table>
</div>
</div>
<p class="footer-text">Created By : <a href="//nicesnippets.com" target="_blank" rel="nofollow">nicesnippets.com</a></p>
</div>
</body>
</html>
body{
background-color:#FBFBFB !important;
}
.main-section{
margin-top:120px;
font-family: 'Archivo Narrow', sans-serif;
}
.header{
font-size:25px;
}
.header span{
color:#8CBF00;
}
.blink-text span{
color:red;
font-size:20px;
}
.footer-text{
color:#a2a2a2;
font-size:20px;
}
@-webkit-keyframes blinker{
from {opacity: 1.0;}
to {opacity: 0.0;}
}
.blink{
text-decoration: blink;
-webkit-animation-name: blinker;
-webkit-animation-duration: 0.6s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-direction: alternate;
}
