Tutorial on Creating HTML5 and JavaScript Load More Button

In this video tutorial I’m sharing about how to create “Load More” button in JavaScript to show partial contents of an array variable.

Please note that in this technique first I retrieve all the information from server at single shot and store it in single array variable. So load more mechanism is happening on client side, not each time calling server to return partial contents.

Watch this video demonstration:

I am using jQuery for this code, so you need to include jQuery first. And here is the actual code:

<div id="content"></div>
<button id="lmbutton" onclick="loadmore()">Load More</button>
<script>
	var items = ["one", "twp", "three", "four", "five", "six", "seven", "eight", "nine", "ten"]
	var currentindex = 0
	function loadmore(){
	var maxresult = 2
		for(var i = 0; i < maxresult; i++){
			if(currentindex >= items.length){
				$("#lmbutton").hide()
				return
			}
			$("#content").append("<div>"+items[i+currentindex]+"</div>")
		}
		currentindex += maxresult
	}
	loadmore()
</script>