Как сделать кнопку показать еще

Кнопка «Показать ещё» на чистом JavaScript

Кнопка «Показать ещё» обычно применяется, когда у нас очень много контента и его нужно вывести не весь сразу, а постепенно (небольшими порциями). Для этого весь контент разбивается на страницы.

При этом сначала отображается только первая страница (на этом примере это две карточки) и кнопка «Загрузить ещё» . Если пользователь хочет посмотреть ещё записи ( следующую страницу ), то он просто нажимает на кнопку .

Это похоже на постраничную навигацию, но только предыдущие записи остаются на месте, а новые добавляются после них . При этом обычно это на сайте реализуется с использованием AJAX, то есть без перезагрузки страницы.

Шаг 1. Написание backend-кода на PHP

Перед тем как перейти к разработке frontend-кода, необходимо сначала написать серверный сценарий, который будет обрабатывать наш запрос и возвращать ответ в формате JSON. Можно конечно и в формате HTML, но это уже будет очень простой случай, который в рамках этой статьи рассматривать не будем.

Серверный сценарий напишем, например, на PHP. Кроме этого, не забываем, чтобы он работал необходимо установить веб-сервер с поддержкой PHP на локальную машину.

Для написания кода на PHP создадим файл, например, с именем more.php в корне сайта.

Данные в этом примере будем получать для простоты из подготовленного массива, а не из базы данных:

Количество записей на одной странице будем определять с помощью константы LIMIT :

Сейчас у нас одна страница будет состоять из 2 записей. Всего записей (элементов в массиве) узнаем с помощью функции count :

Номер страницы ( page ) будем передавать серверу через POST. В скрипте на PHP для получения этого значения воспользуемся глобальной переменной $_POST[‘page’] :

Дополнительно на странице клиента будем отображать кроме самих данных ещё их оставшееся количество. Вычисление оставшегося количества записей будем выполнять следующим образом:

Сами отдаваемые данные будем получать как срез массива с помощью array_slice :

Кроме этого, клиенту будем передавать шаблон, который затем с помощью JavaScript будем использовать для генерации HTML-кода карточки:

Возвращать ответ будем в формате JSON. Для этого перед отправкой данных установим соответствующий заголовок:

Отправлять клиенту будем следующий массив данных, который используя функцию json_encode переведём в JSON:

Теперь давайте проверим, что выведет полученный PHP-файл, сохранённый в корне сайта под именем more.php . Для этого откроем браузер и в адресной строке введем путь к нему (в данном случае: http://localhost/more.php ):

В окне браузера мы видим JSON-код, то есть результат выполнения файла more.php на сервере.

Шаг 2. Создание HTML-кода

Теперь, после того как серверный код работает, создадим HTML-страничку index.html :

Все элементы, связанные с кнопкой «Показать ещё» обернём в .cards :

Начнем написание HTML-кода с разметки контейнера для карточек. Добавлять карточки в контейнер будем с помощью JavaScript, поэтому этот элемент у нас будет пустым:

Кроме кнопки у нас ёще будет блок .cards-progress , в котором расположим прогресс-бар и текстовую информацию о количестве показанных карточек:

Ну и сама кнопка:

У кнопки имеется атрибут data-page , который будем использования для хранения количества показанных страниц.

Кнопка у нас имеет svg-иконку, которую создали посредством <use href=»#icon-arrow-repeat»></use> . При этом сама она определена в <svg> с использованием <symbol> , который вставили сразу после открывающего тега <body> :

Шаг 3. Стилизация карточек и кнопки

Создавать CSS-код будем в отдельном файле main.css, который расположим рядом с index.html . Подключение main.css к index.html выполним с помощью <link> :

Вёрстку контейнера ( .card-container ), в который мы будем добавлять карточки, выполним через флексы:

Расстояние между карточками зададим с помощью CSS-свойство gap .

Карточка товара ( .card ) у нас будет состоять из изображения ( .card-img ) и заголовка ( .card-title ). Для оформления самой карточки и её элементов будем использовать следующие стили:

Стили для кнопки:

При нажатии на кнопку она будет переводиться в неактивное состояние ( disabled ). Кроме этого, к ней будет добавляться с помощью JavaScript класс btn-more-loading , который будет активировать CSS-анимацию, и иконка в кнопке будет непрерывно вращаться.

Стилизацию прогресс-бара и дополнительной информации, расположенного рядом с ним, выполним следующим образом:

Прогресс-бар – это очень полезный элемент, который позволяет увидеть пользователям количество показанных и оставшихся карточек. Кроме этого, с помощью него они могут оценить, насколько большим является список и сколько времени им потребуется для просмотра всех элементов.

Вся разметка, связанная с кнопкой «Показать ещё» у нас находятся в корневом элементе .card . Его стилизацию в рамках этого примера выполним так:

То есть ограничим его ширине и выровняем по центру, а также добавим внешние отступы сверху и снизу.

Для скрытия элементов мы будем использовать класс d-none :

В этом примере у нас он используется для скрытия кнопки «Показать ещё», когда все карточки уже отображены и загружать уже больше нечего. Добавляется он в этом случае к элементу с помощью JavaScript. Кроме этого, d-none используется ещё в HTML-коде для скрытия <svg> .

Шаг 4. Добавление функциональности к кнопке с помощью JavaScript

Всю функциональность, связанную с кнопкой на странице, будем выполнять с помощью JavaScript, который напишем без использования каких-либо библиотек. Для этого создадим файл main.js и подключим его к нашей HTML-странице:

Начнём создания JavaScript с выборки кнопки:

Теперь напишем асинхронную функцию, которая будет выполняться при нажатии на кнопку, то есть она у нас будет использоваться в качестве обработчика события click :

Этот код выполняет в следующем порядке вот эти действия:

переводит кнопку в неактивное состояние, чтобы пользователь не мог выполнить это действие ещё раз пока не завершится текущее;
включает анимацию для иконки, расположенной в кнопке, посредством установки класса btn-more-loading ;
отправляет с помощью fetch на сервер запрос методом POST и передаёт в его теле номер запрашиваемой страницы;
ждёт ответа от сервера в формате JSON;
отключает видимость кнопки «Загрузить ещё», если мы показали все записи;
обновляет значение атрибута data-page у кнопки;
формирует HTML-код карточек, используя полученный шаблон от сервера и данные;
вставляет сформированный HTML-код карточек в контейнер, используя метод insertAdjacentHTML ;
обновляет прогресс-бар и количество показанных карточек;
удаляет класс btn-more-loading , который использовался для включения анимации иконки;
переводит кнопку в активное состояние, то есть делаем её доступной для следующего нажатия;

Теперь созданную функцию loadMoreCards укажем в качестве обработчика события click :

Формирование первой страницы будем выполнять на клиенте с помощью JavaScript. Для этого просто программным способом кликнем по кнопке «Загрузить ещё»:

Кнопка "показать ещё"

Есть 100 элементов с блоками.
Необходимо показать на странице первые 10 блоков.
При повторном клике на кнопку, показывать следующие 10 блоков.

Codepen я смотрел.
Вот только попытки Ваши закончились на box.slice(0,9)
Это потом Вы хоть что-то добавили.
Так как Grundy сделал мне выговор, который мы ещё обсудим, решил добавить ответ.

Всем блокам дать класс-невидимку, при каждом клике собрать все элементы с этим классом и с первых N элементов убрать невидимку, дать другой класс со стилями:

Вот красивое решение. В скрипте можно указать, какое количество элементов выводить. Когда все элементы уже показаны, то кнопка скрывается. Примеры:

Решение на JavaScript(jQuery). 100 элементов

Другое количество элементов (не кратное десяти)

Решение на нативном JavaScript

Кого интересует более проработанная версия, в адаптивных блоках в ряд 3 блока, плюс кнопка показать еще блоки с фото, показываем 6 блоков, но если надо подгрузить еще 6, нажимаем кнопку показать еще, если все фото загружены, кнопка исчезает. Код подгрузить еще блоки, позаимствовал у автора выше.

Для фото до и после, используется скрипт twentytwenty.

Таким способом можно показывать работы, до и после, ну и для другого применить.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

How to Implement a “Load More” Button With Vanilla JavaScript

Jemima Abu

Jemima Abu Last updated Jul 29, 2022

We’ve covered Pagination and Infinite Scrolling in previous tutorials. On this occasion, we’ll be looking at another method of controlling how content is displayed on a page: using a “Load More” button.

A “Load More” button adds more content to a page when clicked by a user. This is a common approach for blogs as it allows the user to decide how and when information is displayed.

Here’s a look at the final product we’ll work on today—scroll to the bottom of the pen and click the button to add more content to the page:

1. Card Container and Button HTML

We’ll start by placing the container for our cards on the page. We’ll be adding the cards to the container using JavaScript so the div will be empty.

Our implementation includes a “load more” button and also displays the current number of cards being shown and the total number of cards available. We’ll include these features in a card-actions div. The content in card-count and card-total will be added with JavaScript.

2. Styling the Cards and Button

The cards we’ll be adding to the card-container div will have a classname of “card”.

We’ll style our load-more button in a similar manner to the cards and add a disabled pseudo-selector to show when the end of the cards have been reached.

3. Adding Functionality With JavaScript

This is what the functional implementation for the load more button will look like:

Define a number of cards to be added to the page each time the user clicks the button.
Detect when the total number of cards have been added and disable the button.

Defining Constants

First, get all the elements we’ll need from our DOM:

Now we need to define our global variables.

We’ll need a value for the max number of cards to be added to the page. If you’re getting your data from a server, this value is the length of the response from the server. Let’s initialise a card limit of 99.

The cardTotalElem is the element for displaying the max number of cards on the page so we can set the innerHTML to the cardLimit value;

Then we’ll define a variable for how many cards we want to increase the page by:

Much like with our infinite scrolling tutorial, we’ll want to know how many “pages” we’ll have i.e. how many times can we increase the content till we reach the max limit. For example, with our defined cardLimit and cardIncrease variables, we can increase the content 10 times (assuming we’ve already loaded the first 9 elements) until we reach the limit. We’ll do this by dividing the cardLimit by the cardIncrease .

Then we’ll define a value to determine which page we’re on:

Creating a New Card

Now we have all our constants, let’s make a function to add a new card to the card container. We’ll set the innerHTML of our cards to the index value so we can keep track of the number of cards we’re adding.

A fun feature in this demo is that each card has a randomly generated background color.

We can also apply this function to our load-more button on page load to give it a random background color as well:

Adding Cards to the Container

We’ll add our cards to our container using a similar functionality to what we used in the Infinite Scrolling tutorial.

First, determine the range of cards to be added to the page. The addCards function will accept a pageIndex parameter, which will update the global currentPage value. If we’re on page 1, we’ll add cards 1 to 9. If we’re on page 2, we’ll add cards 10 to 18 and so on.

We can define that mathematically as:

In this function, our start range will always be one less than the value we’re trying to get (i.e. on page 1, the start range is 0, on page 2, the start range is 9) so we’ll account for that by setting the value of our for loop index to startRange + 1 .

Detecting When Card Limit is Reached

A limit we’ll have to look out for is the endRange number. If we’re on the last page, we’ll want our end range to be the same as the cardLimit . For instance, if we have a cardLimit of 75 and a cardIncrease of 10 and we’re on page 8, our startRange will be 70 and our endRange value should be 75.

We’ll modify our addCards function to account for this:

Our demo also includes a cardTotal element that displays the number of cards currently being shown on the page so we’ll set the innerHTML of this element as the end range.

Another thing to look out for is disabling the load more button when the cardLimit is reached. We can define a handleButtonStatus function to determine whether to disable the button i.e. when the currentPage is equal to the cardLimit :

We’ll then pass this new function into our addCards function:

Loading Initial Cards

We’ve defined a feature for adding cards to the container so we’ll update our window.onload function to set the initial cards to be added to the page.

Handling Load More

We’ll handle adding the content by increasing the currentPage number by 1 every time the load more button is clicked. Since we’ve already added all the limit checks in our addCards function, we won’t need to do any other check within our click event.

Conclusion

And we’re done! We’ve successfully implemented a “Load More” button feature on our web page!

Открытие и закрытие контента на jQuery

По своей сути "показать полностью" и "показать еще" это одно и тоже, но для каждого варианта в этой заметке используются разные решения.

В интернете масса различных примеров, как показать и скрыть контент, нажав на кнопку, но все они, как правило, реализованы для одного конкретного блока. В данной теме оба примера можно применять к неограниченному их числу.

Скрипты используемые в этих примерах сделаны для библиотеки jQuery

Кнопка «показать еще»

В этом примере часть контента с классом hide-content скрывается и показывается нажатием на кнопку или любой другой элемент с классом show-more

Каждая кнопка и скрытый текст должны находиться в контейнере content-block

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CSS в этом примере не выкладываю, т.к. оформление тут индивидуальное, но если кому нравится эта кнопка, ее код представлен ниже.