It is very common requirement when you want to show some elements with more text in jQuery. So you can get that functionality by using below line of code very easily. You just need to make your html list items in ul and li formats with those classes mentioned in below code. If everything is setup properly your code will run exactly as expected.
$('ul.topic-list').each(function(){
var length = $(this).find('li').length;
if( length > 3){
$('li', this).eq(2).nextAll().hide().addClass('toggleable_li');
$(this).append('
}
});
$('ul.topic-list').on('click','.more', function(){
if( $(this).hasClass('less') ){
$(this).text('More...').removeClass('less');
}else{
$(this).text('Less...').addClass('less');
}
$(this).siblings('li.toggleable_li').slideToggle();
});
If you guys stuck anywhere just drop a comment below and I will assist to get your problem resolved.