Show hide more LI elements

Add show/hide more list items on marked lists. Set the number of visible items.

by Petr Haluza

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Menu 1
<ul class="addMore">
    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>    <li>6</li>
</ul>

menu 2
<ul class="addMore">
    <li>a</li>    <li>b</li>    <li>c</li>    <li>d</li>    <li>e</li>    <li>f</li>  <li>g</li>  <li>h</li>
</ul>

menu jen 3 polozky
<ul class="addMore">
    <li>i</li>    <li>ii</li>    <li>iii</li>
 </ul>

JavaScript

$.fn.toggleHTML = function(a, b) {
    this.html(function(_, html){
        return html === a  ? b : a;
    })
}

$('.addMore').each(function () {
	var $i_li = 1;
	$(this).find('li').each(function() {
  	if ($i_li > 4) {
  		$(this).hide();
    }
    $i_li++;
  });
  
  if ($i_li > 4) {  
    $(this).append('<li class="moreLabel">Více kategorií</li>').find('li:last').click(function() {
        $(this).siblings(':gt(3)').toggle(200);
        $(this).toggleHTML('Více kategorií', 'Méně kategorií');
    });
  };  
  
});