Show more link in jquery

JavaScript
1

I have a bunch of links that are separated by commas. I’d just like to show about 8 links and have a “Show More” link at the end.

Is there anyway to append the “Show More” link after the 8th link, then show the rest when someone clicks the link it will disappear and the rest of the links will be displayed? If so, how?

2

First, you have to put the links on an array, you can do this by using split function.

array_link = split(links, ',');

Then, you can do a loop that will handle the link creation like this:


for(i=0; i < array_link.length; i++){
	//here you will be creating your link tags <a class="pages">some link</a> don't forget the class
	link_html += '<a class="pages" href="' + array_link[i] +'">'+ array_link[i] +'</a>';
}
link_html += '<a id="showmore">Show more</a>';
//append the html link tags to a container
$(link_html).appendTo('#idOfContainer');
//call the function
handleLinks();

// create a function that will show/hide the links
function handleLinks(){
	//bind the links so that when you click the link it will be hidden
	$('.pages').click(function(){
		$(this).hide();
	});
	//hide the links greater than 7 (it starts at 0)
	$('.pages:gt(7)').hide();
	//when you click show more it will be shown
	$('#showmore').click(function() {
		$('.pages:gt(7)').show();
		$(this).hide();
		return false;
	});
}

Hope that helps :slight_smile: