test více položek v seznamu

by Petr Haluza

HTML

<div id="menu1" class="menu">
  <ul class="term-list" data-visible="3">
    <li class="term-item ">Intel Core i3</li>
    <li class="term-item ">Intel Core i5</li>
    <li class="term-item ">Intel Core i7</li>
    <li class="term-item ">Intel Core i9</li>
  </ul>
</div>

<div id="menu2" class="menu">
  <ul class="term-list">
    <li class="term-item ">Intel Core i3</li>
    <li class="term-item ">Intel Core i5</li>

  </ul>
</div>

<div id="menu3" class="menu">
  <ul class="term-list" data-visible="1">
    <li class="term-item toggleable minus">Intel Core i0</li>
    <li class="term-item toggleable minus">Intel Core i1</li>
    <li class="term-item ">Intel Core i3</li>
    <li class="term-item ">Intel Core i5</li>
    <li class="term-item ">Intel Core i7</li>
    <li class="term-item ">Intel Core i9</li>
    <li class="term-item ">Intel Core i3</li>
    <li class="term-item ">Intel Core i5</li>
    <li class="term-item ">Intel Core i7</li>
    <li class="term-item ">Intel Core i9</li>
  </ul>
</div>

CSS

.term-item.minus { display:none}

JavaScript

$('ul.term-list').each(function(){
	var invisibleItems = $(this).find('li.minus').length;
  var visibleItems = this.dataset.visible;
  var visibleItemsNum = visibleItems - 1 + invisibleItems;
  if( $(this).find('li').length > visibleItemsNum){    
    $('li', this).eq(visibleItemsNum).nextAll().hide().addClass('toggleable');
    $(this).append('<li class="more">More...</li>');    
  }
  $(this).on('click','.more', toggleShow);
});


function toggleShow(){
  var opened = $(this).hasClass('less');  
  $(this).text(opened ? 'More...' : 'Less...').toggleClass('less', !opened);    
  $(this).siblings('li.toggleable').slideToggle(100);
}