Grow your CSS skills. Land your dream job.

Showing/Hiding Lists

  • # September 4, 2011 at 2:25 pm

    Hey hi..

    I have a big item list that i wanted to hide, then a button called #more will sow 5 more. so far I was able to show more (link fiddle below), but I don’t know how to show less with a button called #less

    http://jsfiddle.net/7CnpH/

    Do you have an idea on how to do this???

    thanks

    # September 5, 2011 at 2:21 am

    hey!

    check the cor below! its working with less and more both.

    i have added one constant variable visible which will set how many are visible at once!

    link to jsfiddle:

    http://jsfiddle.net/9pSXR/

    jQuery(function($) {
    var visible = 7;
    $('ul li:gt('+(visible - 1)+')').hide();

    $('#more').click(function() {
    if ($('ul li:visible:last').is(':last-child')) {
    return false;
    }

    var currentIndex = $('ul').children('li:visible:last').index(),
    nextIndex = currentIndex + (visible + 1);
    $('ul li').hide();
    $('ul li:lt(' + nextIndex + '):gt(' + currentIndex + ')').show();
    });

    $('#less').click(function() {
    if ($('ul li:visible:first').is(':first-child')) {
    return false;
    }

    var currentIndex = $('ul').children('li:visible:first').index();
    var prevIndex = (currentIndex - (visible + 1));
    if(prevIndex < 0) {
    prevIndex = 0;
    }

    $('ul li').hide();
    if(prevIndex == 0)
    $('ul li:lt(' + currentIndex + ')').show();
    else
    $('ul li:lt(' + currentIndex + '):gt(' + prevIndex + ')').show();
    });
    });
    # September 5, 2011 at 1:57 pm

    @kalps1982 thanks man , I could never thought on that solution is great, thanks very much!

    Now , you want to see it in action???

    http://petuniaandco.com

    Thanks again

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".