Showing/Hiding Lists

[Locke]

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

[kalps1982]

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();

});

});

[Locke]

@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

[Author]

Posts