Show some first N elements with more/less functionality in jQuery?

How to show some elements with more or less feature in jQuery. After clicking on more rest of the elements appear and clicking on less it should go in previous state. 

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('

<li class="more">More...</li>');    
  }

});


$('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.