Table with Expandable Sections

Written by @kerixa 18 May 2020

If you have a table with many rows, it is a good idea to break it to different sections. Then you can add an effect to collapse and expand each section, when it is not needed. By this trick you can encapsulate many rows into a compact one!

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<link href="https://fonts.googleapis.com/css?family=Assistant:400,700|Poppins:400,500,600,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css'>
<style>
/* Colours */
/* fonts */
body {
  font-family: "Assistant", sans-serif;
}

h1, h2, h4, h5, h6 {
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
}

h2 {
  font-weight: 700;
}

h3 {
  font-family: "Assistant", sans-serif;
  font-weight: 300;
  text-transform: none;
}

p {
  font-weight: 400;
}

strong {
  font-weight: 700;
}

/* Utilities */
.no-padding {
  padding: 0 !important;
}

/* width */
.container {
  width: 1080px;
}

/* Table Heading */
.pricing-top-heading th {
  text-align: center;
  font-weight: 700;
  font-size: 2rem;
  width: 33%;
}

.pricing-bottom-heading th {
  padding: 0 2%;
  font-weight: 300;
}

.pricing-top-heading .free {
  background-color: #f26b42;
  border: 1px solid #f26b42;
}

.pricing-bottom-heading .free {
  background-color: #f28d6e;
  border: 1px solid #f28d6e;
}

.pricing-top-heading .basic {
  background-color: #58c5c7;
  border: 1px solid #58c5c7;
}

.pricing-bottom-heading .basic {
  background-color: #7fd1d2;
  border: 1px solid #7fd1d2;
}

.pricing-top-heading .pro {
  background-color: #a5c653;
  border: 1px solid #a5c653;
}

.pricing-bottom-heading .pro {
  background-color: #b9d17b;
  border: 1px solid #b9d17b;
}

.pricing-top-heading,
.pricing-bottom-heading {
  color: white;
  height: 90px;
}

table thead th {
  border: 0;
}

/* table */
table {
  width: 100%;
}

.collapsible-section-header {
  background-color: #e1e1e1;
}

.collapsible-section-header a {
  color: #363636;
  font-weight: 700;
  text-decoration: none;
}

.collapsible-section-header a:after {
  content: '\25bc';
  padding-left: 0.5em;
}

.collapsible-section-header a.collapsed:after {
  content: '\25ba';
  padding-left: 0.5em;
}

tbody td {
  background-color: #ededed;
  border: 1px solid #d1d1d1;
  padding: 1.25rem;
}
</style>

<div class="container">
<div class="row">
<table>
<tbody>
<tr>
<td class="collapsible-section-header" colspan="3">
<a data-toggle="collapse" href="#collapse_section_one">Section 1</a>
</td>
</tr>
<tr>
<td class="no-padding" colspan="3">
<div id="collapse_section_one" class="collapse in">
<table style="width:100%">
<tr>
<td>Free 1</td>
<td>Basic 1</td>
<td>Pro 1</td>
</tr>
<tr>
<td>Free 2</td>
<td>Basic 2</td>
<td>Pro 2</td>
</tr>
<tr>
<td>Free 3</td>
<td>Basic 3</td>
<td>Pro 3</td>
</tr>
</table>
</div>
</td>
</tr>

<tr>
<td class="collapsible-section-header" colspan="3">
<a data-toggle="collapse" href="#collapse_section_two">Section 2</a>
</td>
</tr>
<tr>
<td class="no-padding" colspan="3">
<div id="collapse_section_two" class="collapse in">
<table style="width:100%">
<tr>
<td>Free 4</td>
<td>Basic 4</td>
<td>Pro 4</td>
</tr>
<tr>
<td>Free 5</td>
<td>Basic 5</td>
<td>Pro 5</td>
</tr>
<tr>
<td>Free 6</td>
<td>Basic 6</td>
<td>Pro 6</td>
</tr>
</table>
</div>
</td>
</tr>

<tr>
<td class="collapsible-section-header" colspan="3">
<a data-toggle="collapse" href="#collapse_section_three">Section 3</a>
</td>
</tr>
<tr>
<td class="no-padding" colspan="3">
<div id="collapse_section_three" class="collapse in">
<table style="width:100%">
<tr>
<td>Free 7</td>
<td>Basic 7</td>
<td>Pro 7</td>
</tr>
<tr>
<td>Free 8</td>
<td>Basic 8</td>
<td>Pro 8</td>
</tr>
<tr>
<td>Free 9</td>
<td>Basic 9</td>
<td>Pro 9</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js'></script><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300