"Show Less show more ( Winson222 )"
Bootstrap 4.1.1 Snippet by Winson222

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<h2>Show More & Show Less</h2> <br>
<div id="boom" class="collapse show">
<div class="table-responsive">
<table class="table">
<thead class="thead">
<tr>
<th>#</th>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lifna</td>
<td>23</td>
<td>Female</td>
</tr>
<tr>
<td>2</td>
<td>Clint</td>
<td>21</td>
<td>Male</td>
</tr>
<tr>
<td>3</td>
<td>Rojjer</td>
<td>19</td>
<td>Male</td>
</tr>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
tbody{font-size: 16px;background-color: transparent;}
.thead{background-color: #1A1A1A;font-size: 18px; color: white;font-weight:normal;}
.btnS{float: right;background-color: hotpink;border: none;color: white;padding: 5px 15px;text-align: left;font-size: 14px;}
.btnS:focus{outline:none;}
.btnS:after {content: "Less";float: right;margin-left: 3px;}
.btnS.collapsed:after {content: "More";}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
/* check this out=> https://bootsnipp.com/Winson222 */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Awesome Landing Page
Creating password field text hide show via a single class
Show Dropdown Hover & Caret Up

Questions / Comments: