"Card Blocks collapse and expand"
Bootstrap 3.3.0 Snippet by dvinodeluru

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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-xs-12"><h2>Card Blocks</h2></div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="card-blocks">
<div class="card-item panel">
<div class="card-head panel-heading">Card One <span class="pull-right"></spant></span></div>
<div class="card-body panel-body">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. </div>
<div class="card-foot panel-footer"><a href="#" class="btn btn-link">Read more</a></div>
</div>
<div class="card-item panel">
<div class="card-head panel-heading">Card Two <span class="pull-right"></span></div>
<div class="card-body panel-body">Lorem ipsum is a pseudo-Latin text used in web designelements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. </div>
<div class="card-foot panel-footer"><a href="#" class="btn btn-link">Read more</a></div>
</div>
<div class="card-item panel">
<div class="card-head panel-heading">Card Three <span class="pull-right"></span></div>
<div class="card-body panel-body">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. </div>
<div class="card-foot panel-footer"><a href="#" class="btn btn-link">Read more</a></div>
</div>
<div class="card-item panel">
<div class="card-head panel-heading">Card Four <span class="pull-right"></span></div>
<div class="card-body panel-body">Lorem ipsum is a pseudo-Latin text used in web design, It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. </div>
<div class="card-foot panel-footer"><a href="#" class="btn btn-link">Read more</a></div>
</div>
<div class="card-item panel">
<div class="card-head panel-heading">Card Five <span class="pull-right"></span></div>
<div class="card-body panel-body">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient toLorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. </div>
<div class="card-foot panel-footer"><a href="#" class="btn btn-link">Read more</a></div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
.card-item {display:inline-block; width:100%; box-shadow: rgba(0,0,0,0.4) 1px 1px 3px 0px;border-radius: 3px; background: #fff; border: 0; margin-bottom:30px;}
.card-item .panel-heading {font-size: 20px;color: #000;overflow: inherit;line-height: normal;}
.card-blocks{columns:3; column-gap:30px; }
.card-blocks:after{content:'';display:block;height:50px;}
.card-head span{display:inline-block; padding:15px; background:#333;color:#fff; padding:0 5px; cursor:pointer;}
.card-body{transition:all 0.4s; padding-top:0;padding-bottom:0;}
.card-body:before,.card-body:after{content:'';display:block;height:15px;}
.card-head span::before{content:"\e113";float: right; font-family: 'Glyphicons Halflings'; transition:all 0.4s;}
.collapsed .card-head span::before {transform:rotate(-180deg);}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
$(function(){
$('.card-head > span').click(function(){
$(this).parent().parent().toggleClass('collapsed');
$(this).parent().parent().find('.card-body').slideToggle();
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard React
Navbar Search Box Auto Expand
bootstrap 4 card
Card Styles

Questions / Comments: