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;
    display: inline-block;
}

@media (max-width: 767px) {
    #nav-container {
	width: 767px;
	padding-left: 0px;
}
}

JavaScript

$(document).ready(function() {
    // run test on initial page load
    checkSize();

    // run test on resize of the window
    $(window).resize(checkSize);
});

//Function to the css rule
function checkSize(){
    if ($("#nav-container").css("width") == "767px" ){
        // your code here
		var totalCount;   //Keeps track of the total number of li's, shown or hidden.
		var currentCount; //Keeps track of the number of li's currently shown.

$(document).ready(function () {
    //Count how many li's there are in total.
    totalCount  = $('.thumbnails li').size();
    //Start by showing three of them.
    currentCount = 3;
    adjustLiShown();
    $('#loadMore').click(function () {
       //Increase by three and update.
       currentCount += 3;
       adjustLiShown()
    });
    $('#showLess').click(function () {
       //Decrease by three and update.
       currentCount -= 3;
       adjustLiShown()
    });
});

function adjustLiShown() {
    //Hide all and then show the one with index under total count.
    $('.thumbnails li').hide().filter(':lt(' + currentCount + ')').show();
    //Only show "load more" if we haven't reached the total yet.
    $('#loadMore').toggle(currentCount < totalCount);
    //Only show "show less" if we are above the starting number.
    $('#showLess').toggle(currentCount > 3);
}
    }
}