#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2005
    Location
    Iran
    Posts
    37
    Rep Power
    10

    Toggle unordered list


    I have a long unordered list that must be cut down and each time 10 items must be visible in visible area and by clicking one arrow button the next 10 items show up. something like below image:



    each column HTML code is like this:

    Code:
        <li class="linkcat"><h2>Main Title</h2>
            <ul class="xoxo blogroll">
             <li><a href="#">Title 1</a></li>
             <li><a href="#">Title 2</a></li>
             <li><a href="#">Title 3</a></li>
             ...
             <li><a href="#">Title 4</a></li>
            </ul>
        </li>

    What should I do?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    101
    Rep Power
    27
    I think you should instead drop all the list items into a single <ul>. Then you can just show/hide the list items using jQuery. Turns out I am a sucker for hacking little jQuery'd widgets like this so here is a jsfiddle that shows what I'd do. Could use some polishing, like disabling/enabling or hiding/showing the pagination buttons when applicable.

    jQuery code for whoever hates jsfiddle:
    Code:
    // hide all to start
    $("ul.blogroll li").hide();
    // show the first 10 by default
    $("ul.blogroll li:lt(10)").show();
    
    // click handler for pagination
    $(".next-pg, .prev-pg").click(function() {
        var visIx, increment, topIx, btmIx;
        // what's the first visible item's index?
        visIx = $("ul.blogroll li:visible").index();
        // which direction are we going, +10 or -10?
        increment = $(this).hasClass("next-pg") ? 10 : -10;
        //alert(visIx+" "+increment);
        // do we have another page to go to?
        if (visIx+increment >= 0 && visIx+increment < $("ul.blogroll li").length) {
            if ($(this).hasClass("next-pg")) {
                // going up
                topIx = visIx + (2*increment);
                btmIx = visIx + increment;
            }
            else {
                // going down
                topIx = visIx;
                btmIx = visIx + increment;
            }
            //alert("change page to items "+btmIx+" to "+topIx);
            $("ul.blogroll li").hide();
            $("ul.blogroll li:lt("+topIx+")").show();
            $("ul.blogroll li:lt("+btmIx+")").hide();
        }
    });

IMN logo majestic logo threadwatch logo seochat tools logo