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

$(document).ready(function () {
    $('.thumbnails li:lt(3)').show();
    $('.thumbnails li:gt(2)').hide();
    $('#showLess').hide();
    var items =  9;
    var shown =  3;
    $('#loadMore').click(function (e) {
        $('#showLess').show();
        $(".thumbnails li:not(:visible)").slice(0, 3)
        .show(function() {
          if ($(".thumbnails li:visible").length === items) {
            $(e.target).hide()
          }
        })
    });
    $('#showLess').click(function (e) {
        $('.thumbnails li:visible').slice(-3).hide(function() {
          if ($(".thumbnails li:visible").length === 0) {
            $(e.target).hide()
          };
            
            if ($('.thumbnails li:visible').length < items) {
            $("#loadMore").show()
            }
        });
    });
});