Скрыть и показать по нажатию элементы списка в зависимости от их количества

258

01 августа 2017, 17:19

На разных страницах сайта есть списки разной длины от 5 до ~50 пунктов.
Списки оформлены в виде следующей конструкции:

<div class="tdm"> 
  <ul> 
    <li>Холодильник AEG</li> 
    <li>Холодильник ATLANT</li> 
    <li>Холодильник AVEX</li> 
    <li>Холодильник Akai</li> 
    <li>Холодильник Amana</li> 
    <li>Холодильник Amica</li> 
    <li>Холодильник Ardo</li> 
    <li>Холодильник Artevino</li> 
    <li>Холодильник Asko</li> 
  </ul> 
</div>

Необходимо с помощью скрипта, если пунктов списка на странице, например болеe 5 штук, то остальные прятать, а вместо них показывать надпись "Показать все". Нужно так же отображать весь список при нажатии на надпись "Показать все", а саму надпись убрать после клика по ней, т.к. она более будет не нужна (сворачивать список при повторном клике не требуется – одностороннее действие).

Возможно ли это реализовать с помощью JQuery? Если да, то подскажите, как должен выглядеть скрипт для решения этой задачи?

Answer 1

var $tdm = $('.tdm'); 
 
// Перебераем все .tdm 
$tdm.each(function () { 
  // Получаем все пункты li в .tdm 
  var $item = $(this).find('li'), 
      // С помощью фильтра выбираем все пункты, которые идут после пятого 
      $item_target = $item.filter(function () { 
        return $(this).index() > 4 
      }); 
   
  // Создаём ссылку, по нажатию на которую будут показываться все пункты 
  var $link = $('<a href="#all">Показать всё</a>').click(function () { 
    // Показываем скрытые пункты 
    $item_target.show(); 
    // Удаляем кнопку 
    $(this).remove(); 
    // Блокируем все последущие действия ссылки 
    return false; 
  }); 
 
  // Скрываем пункты, которые идут после пятого и добавляем перед шестым пунктом ссылку, с помощью которой покажем скрытые пункты 
  $item_target.hide().eq(0).before($link); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="tdm"> 
  <ul> 
    <li>Холодильник AEG</li> 
    <li>Холодильник ATLANT</li> 
    <li>Холодильник AVEX</li> 
    <li>Холодильник Akai</li> 
    <li>Холодильник Amana</li> 
    <li>Холодильник Amica</li> 
    <li>Холодильник Ardo</li> 
    <li>Холодильник Artevino</li> 
    <li>Холодильник Asko</li> 
  </ul> 
</div> 
<br> 
<div class="tdm"> 
  <ul> 
    <li>Холодильник AEG</li> 
    <li>Холодильник ATLANT</li> 
    <li>Холодильник AVEX</li> 
    <li>Холодильник Akai</li> 
  </ul> 
</div>