JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://responsive.sites.acclipse.com/files/scripts/jquery.matchheight.js"></script>
<div class="blogFeatCon">

<div class="eaBlogFeat eqHeight">
<p>x</p>
</div>
<div class="eaBlogFeat eqHeight">
<p>x</p>
<p>x</p>
<p>x</p>
</div>
<div class="eaBlogFeat eqHeight">
<p>x</p>
<p>x</p>
</div>

<div class="eaBlogFeat eqHeight">
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
</div>
<div class="eaBlogFeat eqHeight">
<p>x</p>
<p>x</p>
<p>x</p>
</div>
<div class="eaBlogFeat eqHeight">
<p>x</p>
<p>x</p>
</div>


<div class="eaBlogFeat eqHeight">
<p>x</p>
</div>
<div class="eaBlogFeat eqHeight">
<p>x</p>
<p>x</p>
<p>x</p>
</div>
<div class="eaBlogFeat eqHeight">
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
</div>




<div class="clearBoth"></div>
<button id='loadMore'>Load more</button>
</div>

CSS

.blogFeatCon .eaBlogFeat { display:none; }
.eaBlogFeat { width:30%; margin:0 1.5%; float:left; border:solid 1px #ddd; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; background:#cc0000;  }
.eaBlogFeat p { color:#fff; }
.clearBoth { clear:both; height:0px; }

JavaScript

$(document).ready(function () {

//MATCH HEIGHT
	$('.eqHeight').matchHeight();

//SCRIPT FOR LOAD MORE
	var max_items_page = 3;
	$('.blogFeatCon > .eaBlogFeat:lt(' + max_items_page + ')').show();
	var shown = null;
	var items = $(".blogFeatCon").find('.eaBlogFeat').length;
	$('#loadMore').on('click', function (e) {
		shown = $('.blogFeatCon .eaBlogFeat:visible').length + max_items_page;
		if (shown < items) {
			$('.blogFeatCon .eaBlogFeat:lt(' + shown + ')').show();
		} else {
			$('.blogFeatCon .eaBlogFeat:lt(' + items + ')').show();
			$('#loadMore').hide();
		}
	});
 
  
});