Доброго времени суток. 🙂
Сегодня хочу рассказать как сделать небольшую полезную штуковину в виде списка у которого скрыты последние пункты. Рассказать вам, как сделать спойлер, выпадающий список скрытых последних пунктов. Например если у вашого списка слишком много пунктов и нужно показать только первые несколько, а остальные скрыть.
Такой функционал можно использовать везде. Мне в моей практике несколько раз пригодился данный метод. Один из вариантов был вывод пунктов на посадочной странице. Список имел много пунктов, которые содержали ключевые слова. Отображать все сразу не имело смысла, но все же они могли быть интересны посетителю, поэтому было принято решение скрыть часть из них. Таким же образом можно сделать галерею со скрывающимися изображениями. В общим, вариантов множество, перечислять их не имеет смысла.
То что я хочу показать имеет следующий вид. Нажмите, чтобы увидеть результат.
Если это то что вам нужно, то давайте приступим к изучению того, как повторить такое у себя на сайте.
Первым шагом в создании такого свернутого списка, будет добавление HTML кода со списком на страницу, если у вас ее нет, если у вас уже есть свой список, то адаптируйте его согласно этому.
<ul class="list"> <li>Пункт номер раз</li> <li>Пункт номер два</li> <li>Пункт номер три</li> <li>Пункт номер четыре</li> <li>Пункт номер пять</li> <li>Пункт номер шесть</li> <li>Пункт номер семь</li> <li>Пункт номер восемь</li> <li>Пункт номер девять</li> <li>Пункт номер десять</li> </ul> <div class="show_hide_list">Смотреть все</div>
Тут все просто. Задаем список и присваиваем ему класс list. Можете указать свой, только в скрипте тоже надо будет указать свой новый класс. Так же, обязательно. нужно добавить кнопку, в нашем случаи это просто блок, с классом show_hide_list.
Второй шаг, добавляем стили для нашего списка и кнопки:
ul.list li:nth-child(n+6){display:none;}
.show_hide_list{cursor:pointer;display:inline-block;text-align:center;padding:10px;background:#fc0;}
Главная строка первая, она обязательна, потому как скрывает все пункты, начиная с шестого. Если вы хотите скрывать с седьмого или со второго и тд, то измените на свой. Так же надо будет изменить и в скрипте. Вторая строка - это стили для кнопки Смотреть все. Ей можете задавать свои стили, которые вам нравятся больше.
Теперь мы должны убедится что к сайту уже подключена библиотека jQuery. Если нет, то это нужно сделать. Можете воспользоваться статей Как и где подключить скрипт?, если не знаете как это сделать.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Следующий шаг, подключение уже самого скрипта, который будет осуществлять показ, скрытие пунктов из списка. Его нужно подключить после библиотеки, которую мы подключали выше. Можете воспользоваться той же инструкцией с подсказками как это сделать правильно.
jQuery(document).ready(function($){
if($('ul.list').find('li').length > 5){
$('.show_hide_list').click(function(){
$('ul.list li:nth-child(n+6)').slideToggle('');
$(this).toggleClass('opnd_g');
if($(this).hasClass('opnd_g')){
$(this).html('Скрыть');}
else {$(this).html('Смотреть все');}
});
}else{$('.show_hide_list').hide();}
});
Давайте разберем скрипт построчно, что бы понять как он работает. Начнем со второй строки, потому как в первой просто объявляем, что скрипт будет выполняться только тогда, когда загружен весь HTML и построен DOM, а в последней, просто закрываем функцию.
UPD: 11.12.2019
Если у вас несколько списков на одной странице и нужно, чтобы открывался только тот на кнопку под которым нажали, замените 4 строку в скрипте.
Кнопка должна быть сразу под списком! Иначе способ не сработает.
// Заменить это
$('ul.list li:nth-child(n+6)').slideToggle('');
// На это
$(this).prev().children('li:nth-child(n+6)').slideToggle('');
Вот и весь скрипт. Он простенький и справляется с задачей. Теперь вы сможете его если захотите на странице вашего сайта скрыть несколько пунктов вашего списка.
На этом все, спасибо за внимание. 🙂