<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> <div class="card-item panel"> <div class="card-head panel-heading">Card Six <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 Seven <span class="pull-right"></span></div> <div class="card-body panel-body">Lorem ipsum is a pseudo-Latin text used in web 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 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 todesign, 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. 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 Eight <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.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 to </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 Nine <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 Ten <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 to 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> </div> </div> </div>

.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);}

$(function(){ $('.card-head > span').click(function(){ $(this).parent().parent().toggleClass('collapsed'); $(this).parent().parent().find('.card-body').slideToggle(); }); });