JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12">
<ul class="thumbnails">
<li><div class="red"></div></li>
<li><div class="red"></div></li>
<li><div class="red"></div></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="thumbnails">
<li><div class="blue"></div></li>
<li><div class="blue"></div></li>
<li><div class="blue"></div></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="thumbnails">
<li><div class="green"></div></li>
<li><div class="green"></div></li>
<li><div class="green"></div></li>
</ul>
</div>
</div>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>
CSS
.thumbnails .red {
background-color: red;
height: 20px;
width: 20px;
text-decoration: none;
}
.thumbnails .blue {
background-color: blue;
height: 20px;
width: 20px;
}
.thumbnails .green {
background-color: green;
height: 20px;
width: 20px;
}
.thumbnails {
list-style-type: none;
}
.thumbnails li {
margin-bottom: 20px;
}
JavaScript
var totalCount;
var currentCount;
$(document).ready(function () {
totalCount = $('.thumbnails li').size();
currentCount = 3;
adjustLiShown();
$('#loadMore').click(function () {
currentCount += 3;
adjustLiShown()
});
$('#showLess').click(function () {
currentCount -= 3;
adjustLiShown()
});
});
function adjustLiShown() {
$('.thumbnails li').hide().filter(':lt(' + currentCount + ')').show();
$('#loadMore').toggle(currentCount < totalCount);
$('#showLess').toggle(currentCount > 3);
}