Такой функционал можно использовать везде. Мне в моей практике несколько раз пригодился данный метод. Один из вариантов был вывод пунктов на посадочной странице. Список имел много пунктов, которые содержали ключевые слова. Отображать все сразу не имело смысла, но все же они могли быть интересны посетителю, поэтому было принято решение скрыть часть из них. Таким же образом можно сделать галерею со скрывающимися изображениями. В общим, вариантов множество, перечислять их не имеет смысла.
То что я хочу показать имеет следующий вид. Нажмите, чтобы увидеть результат.
Если это то что вам нужно, то давайте приступим к изучению того, как повторить такое у себя на сайте.
Первым шагом в создании такого свернутого списка, будет добавление 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, а в последней, просто закрываем функцию.
- if($('ul.list').find('li').length > 5){ - Задаем условие. Если у нашего списка, что имеет класс - .list имеются пункты li и их количество больше пяти.
- $('.show_hide_list').click(function(){ - Запускаем функцию, которая сработает, если мы нажмем на элемент страницы с классом show_hide_list, то бишь на нашу кнопку, что расположена после списка.
- $('ul.list li:nth-child(n+6)').slideToggle(''); - После нажатия показываем пункты с шестого и до последнего. Если вы поменяли количество в стилях, то меняйте и здесь соответственно.
- $(this).toggleClass('opnd_g'); - Добавляем нашей кнопке после нажатия класс opnd_g.
- if($(this).hasClass('opnd_g')){ - Создаем условие, что если наша кнопка имеет класс opnd_g, то...
- $(this).html('Скрыть');} - То меняем текст в кнопке - Смотреть все на Скрыть.
- else {$(this).html('Смотреть все');} - Или, если после нажатия на кнопку класса opnd_g нет, то меняем текст на кнопке снова на Смотреть все.
- }); - Просто заканчиваем наше условие по нажатию на кнопку.
- }else{$('.show_hide_list').hide();} - а это противоположное действие изначальному условию со второй строки, которое задавало действие если пунктов больше 5. То бишь, если пунктов меньше пяти, кнопка Смотреть все - будет скрыта полностью, чтобы не вводить в заблуждение посетителей сайта.
UPD: 11.12.2019
Если у вас несколько списков на одной странице и нужно, чтобы открывался только тот на кнопку под которым нажали, замените 4 строку в скрипте.
Кнопка должна быть сразу под списком! Иначе способ не сработает.
// Заменить это
$('ul.list li:nth-child(n+6)').slideToggle('');
// На это
$(this).prev().children('li:nth-child(n+6)').slideToggle('');
Вот и весь скрипт. Он простенький и справляется с задачей. Теперь вы сможете его если захотите на странице вашего сайта скрыть несколько пунктов вашего списка.
На этом все, спасибо за внимание. 🙂
