JSFiddle - React, Tailwind, and code Playground

by Gretchen Ward

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

$(document).ready(function () {
    $('.thumbnails li:lt(3)').show();
    $('#showLess').hide();
    var items =  9;
    var shown =  3;
    $('#loadMore').click(function () {
        $('#showLess').show();
        shown = $('.thumbnails li:visible').size()+3;
        if(shown< items) {$('.thumbnails li:lt('+shown+')').show();}
        else {$('.thumbnails li:lt('+items+')').show();
             $('#loadMore').hide();
             }
    });
    $('#showLess').click(function () {
        $('.thumbnails li').not(':lt(3)').hide();
    });
});