jQuery load first 3 elements, click “load more” to display next 5 elements

HTML

<div id="loadcontent">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <div class="content">4</div>
    <div class="content">5</div>
    <div class="content">6</div>
    <div class="content">7</div>
    <div class="content">8</div>
    <div class="content">9</div>
    <div class="content">10</div>
    <div class="content">11</div>
    <div class="content">12</div>
    <div class="content">13</div>
    <div class="content">14</div>
    <div class="content">15</div>
    <div class="content">16</div>
    <div class="content">17</div>
    <div class="content">18</div>
    <div class="content">19</div>
    <div class="content">20</div>
</div>
<div id="loadmore">Load more</div>

CSS

#loadmore {cursor:pointer;}

.content { 
margin: 2px;
width: 100px;
text-align: center;
background-color: #f3f3f3;
border: 1px solid #ccc;
}
#loadmore { 
margin: 2px;
width: 100px;
text-align: center;
background-color: #eeeedd;
border: 1px solid #ccc;
}

JavaScript

$(document).ready(function () {

	$(".content").hide();

	count = $(".content").length;
	x=4;
	$('.content:lt('+x+')').show();
	$('#loadmore').click(function () {
		x= (x+4 <= count) ? x+4 : count;
		$('.content:lt('+x+')').show();
	});

});