JSFiddle - React, Tailwind, and code Playground

Fess Up Load More

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<div class="confessbox">
    <div class="confession">
        <p>	<i class="fa fa-quote-left"></i>
I die a little inside every time I'm reviewing a pull request and see something along the lines of: variable = (condition that evaluates to a boolean) ? true : false; I usually end up not saying anything, as I think the people on that team probably wouldn't understand even if I did try to explain it.	<i class="fa fa-quote-right"></i>

        </p>
        <div class="likes">	<span class="label label-confess"><a href="" id="" class="text-success"><i class="fa fa-smile-o"></i> 0</a></span>
	<span class="label label-confess"><a href="" id="" class="text-danger">0 <i class="fa fa-frown-o"></i></a></span>
	<span class="label label-confess">4 hours ago</span>
	<span class="label label-confess">0 views</span>

        </div>
        <div class="comments">	<a href="" class="btn btn-comment btn-sm btn-icon"><i class="fa fa-comments"></i> 2 Comments</a>

        </div>
        <div class="clearfix"></div>
    </div>
    <div class="confession">
        <p>	<i class="fa fa-quote-left"></i>
In eiusmod pork chop chicken.	<i class="fa fa-quote-right"></i>

        </p>
        <div class="likes">	<span class="label label-confess"><a href="" id="" class="text-success"><i class="fa fa-smile-o"></i> 0</a></span>
	<span class="label label-confess"><a href="" id="" class="text-danger">0 <i class="fa fa-frown-o"></i></a></span>
	<span class="label label-confess">24 hours ago</span>
	<span class="label label-confess">0 views</span>

        </div>
        <div class="comments">	<a href="" class="btn btn-comment btn-sm btn-icon"><i class="fa fa-comments"></i> 2 Comments</a>

        </div>
        <div class="clearfix"></div>
    </div>
    <div class="confession">
        <p>	<i...

CSS

.confessbox {  }
.confession, .comment {
    display: none;
    border-bottom: 1px solid #dcdcdc;
    font-size: 22px;
	font-weight: 300;
    padding: 20px 0;
}
	.confession:last-of-type, .comment:last-of-type { border-bottom: 0; }
	.confessbox .confession p i { color: #baebe1; color: rgba(27, 188, 155, 0.3); }

.confession .likes {
    float: left;
    text-align: center;
	opacity: .65;
	-webkit-transition: all 0.35s ease-in-out;
	   -moz-transition: all 0.35s ease-in-out;
			transition: all 0.35s ease-in-out;
}
	.confession .likes:hover {
		opacity: 100;
		-webkit-transition: all 0.35s ease-in-out;
		   -moz-transition: all 0.35s ease-in-out;
				transition: all 0.35s ease-in-out;
	}

.confession .comments {
	float: right;
    text-align: center;
	opacity: .65;
	-webkit-transition: all 0.35s ease-in-out;
	   -moz-transition: all 0.35s ease-in-out;
			transition: all 0.35s ease-in-out;
}
	.confession .comments:hover {
		opacity: 100;
		-webkit-transition: all 0.35s ease-in-out;
		   -moz-transition: all 0.35s ease-in-out;
				transition: all 0.35s ease-in-out;
	}

.label-confess {
	color: #2c3e50;
    font-size: 13px;
    padding: 0 12px 0 6px;
	border-right: 1px solid #dcdcdc;
}
	.label-confess i { margin: 0 3px; }
	.label-confess:last-of-type { border-right: 0; }

.btn-comment {
    background-color: #eaeaea;
    border-color: #eaeaea;
    color: #2c3e50;
}
	.btn-comment:hover, .btn-comment:focus, .btn-comment:active, .btn-comment.active, .open > .dropdown-toggle.btn-comment {
		background-color: #dcdcdc;
		border-color: #dcdcdc;
		color: #222222;
	}

JavaScript

$(document).ready(function () {
    size_li = $(".confessbox .confession").size();
    x=2;
    $('.confessbox .confession:lt('+x+')').show();
    $('#loadMore').click(function (e) {
        e.preventDefault();
        x= (x+1 <= size_li) ? x+2 : size_li;
        $('.confessbox .confession:lt('+x+')').show();
    });
});