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>