Jquery, hide & show list items after nth item
For fun, here's a roundabout way to do it in one chain:
$('ul')
.find('li:gt(3)')
.hide()
.end()
.append(
$('<li>Show More...</li>').click( function(){
$(this).siblings(':hidden').show().end().remove();
})
);
Try the following code example:
$('ul li:gt(3)').hide();
$('.show_button').click(function() {
$('ul li:gt(3)').show();
});
I only wanted to show the "show/hide" if greater than max, so I did this, following Ken:
$('ul').each(function(){
var max = 6
if ($(this).find("li").length > max) {
$(this)
.find('li:gt('+max+')')
.hide()
.end()
.append(
$('<li>More...</li>').click( function(){
$(this).siblings(':hidden').show().end().remove();
})
);
}
});