JSFiddle - React, Tailwind, and code Playground

by Bryan Barrera

HTML

<div class="container">
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>

  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  </div

CSS

.container {
  width: 300px;
  margin: 0;
  overflow: hidden;
}

.boxes {
  width: 30px;
  height: 10px;
  margin: 10px;
  background: blue;
  float: left;
}

.new {
  background: green;
}

.boxes.red {
  background: red;
  display: none;
}

.controls {
  clear: both;
  overflow: hidden;
}

JavaScript

"use strict";

 console.log('running');

 var filterItems = {
   numberOfItemsToDisplay: 10,
   boxes: $('.boxes'),
   container: $('.container'),

   init: function() {
     this.addContainer();
   },

   addContainer: function() {
     // Lets add buttons to navigate this.
     this.container.after('<div class="controls"><button id="show-more">Show 10 more</button> <button id="show-less">Show less</button> <button id="show-all">Show All</button></div>');
     this.addClassNames();
   },

   addClassNames: function() {
     this.boxes.each(function(i) {
       $(this).addClass('item' + (i + 1));

       if (i >= 10) {

         var items = $(this);
         var container = $('.container');

         items.addClass('red new');

       }

     });

     $('.boxes:lt(' + this.numberOfItemsToDisplay + ')').show();

   },

   showMore: function() {

     var totalItems = this.boxes.length;
     // var numberOfItemsToDisplay = this.numberOfItemsToDisplay;
     //   console.log('total items ' + totalItems);
     //   console.log('show more ' + numberOfItemsToDisplay);

     this.numberOfItemsToDisplay = (this.numberOfItemsToDisplay <= totalItems) ? this.numberOfItemsToDisplay + 10 : totalItems;

     console.log('num items displayed ' + this.numberOfItemsToDisplay);

     $('.boxes:lt(' + this.numberOfItemsToDisplay + ')').show();

     $('#show-less').show();

   },

   showLess: function(e) {

     // var numberOfItemsToDisplay = this.numberOfItemsToDisplay;

     console.log('num items ' + this.numberOfItemsToDisplay);

     e.preventDefault();

     this.numberOfItemsToDisplay = (this.numberOfItemsToDisplay - 10 < 10) ? 10 : this.numberOfItemsToDisplay - 10;

     console.log('num items 2 ' + this.numberOfItemsToDisplay);
     $('.boxes').not(':lt(' + this.numberOfItemsToDisplay + ')').hide();
     var visibleBoxes = $('.boxes:visible').length;

     if (visibleBoxes <= 10) {
       $('.boxes').not(':lt(' + 10 + ')').hide();
     }

   },

   showAll: function(e)...