show more using javascript (jquery)

 <script type="text/javascript">
$('ul.sub-categories').each(function(){

var LiN = $(this).find('li').length;
if( LiN > 4){
$('li', this).eq(3).nextAll().hide().addClass('toggleable');
$(this).append('<li class="morelink sclr">Showmore <i class="fa fa-angle-down"></i></li>');
}
});


$('ul.sub-categories').on('click','.morelink', function(){

if( $(this).hasClass('less') ){
$(this).html("Showmore <i class='fa fa-angle-down'></i>").removeClass('less');
}else{
$(this).html("Makeless <i class='fa fa-angle-up'></i>").addClass('less');
}

$(this).siblings('li.toggleable').slideToggle(100);
});
</script>