SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show more link in jquery

    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. #2
    SitePoint Member
    Join Date
    May 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, you have to put the links on an array, you can do this by using split function.
    Code JavaScript:
    array_link = split(links, ',');

    Then, you can do a loop that will handle the link creation like this:
    Code JavaScript:
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •