Show more/less items using jQuery

Question

I've got a set of elements and I don't want to show them all at once. My problem is that I've got to use this a series of times in the same page. Do you guys know jQuery plugin that does what I've written?

jQuery(function($) {
    $lis = $('.addfilter'); 
    min = 2;
    max = $lis.length;
    var visible = min;

    function showUpToIndex(index) {
        $lis.hide();
        $lis.slice(0, index).show();
    }

    function disableButtons(){
        if (visible >= max){
            visible = max;
            $('#more').hide();
        }
        else
        {
            $('#more').show();
        }
        if (visible <= min){
            visible = min;
            $('#less').hide();
        }
        else
        {
            $('#less').show();
        }
    }

    showUpToIndex(visible);
    disableButtons();

    $('#more').click(function(e) {
        e.preventDefault();
        visible = visible + 5;
        disableButtons();  
        showUpToIndex(visible);
    });

    $('#less').click(function(e) {
        e.preventDefault();
        visible = visible - 5;
        disableButtons();     
        showUpToIndex(visible);
    });
});

Here is a working example: http://jsfiddle.net/cUUfS/179/

Thanks!

Answer 1

Please try these,

http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/

https://github.com/mfarid/readmore-readless

This may help I hope