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

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

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

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

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

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

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

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

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

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

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

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

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

Кнопка «Показать еще» на ajax. Подгрузка контента

В этой статье будет рассмотрена возможность реализации, наверняка, всем известного функционала — ajax подгрузка данных с сервера. Работу такого функционала хорошо демонстрирует кнопка «Показать еще», которая без перезагрузки страницы получает данные с сервера и отображает их на странице. Для примера можно выводить, например, новости. Как раз дамп тестовой таблицы новостей у меня есть в статье Пагинатор. Постраничный вывод данных на php.

Кнопка «Показать еще» на ajax. Код

Начнем, с того что подготовим базу данных, создадим таблицу с новостями и заполним ее тестовыми данными, можете воспользоваться sql дампом:

WordPress подгрузка постов кнопкой показать еще или бесконечным скроллом

Кнопка «Показать ещё» и бесконечный скроллинг — это по сути постраничная навигация, которая подгружает следующую страницу с постами без перезагрузки страницы. Подобные примеры часто можно встретить в лентах соц. сетей. В этом примере показана реализация кнопки «Показать ещё» и бесконечного скроллинга постов на Ajax в CMS WordPress.

Кнопка «Показать ещё» в WordPress

Принцип использования сводится к тому, что если на странице есть ещё не показанные посты, т.е. следующая страница, то будет выведена кнопка «Показать ещё». При нажатии на неё посылается стандартный Ajax-запрос к обработчику, который отдает посты следующей страницы и они отображаются ниже уже показанных.

Давайте создадим кнопку в списке постов рубрики. Для этого в файле category.php после цикла while , добавляем следующий код:

При первом вызове этот код выводит кнопку, если общее число страниц max_num_pages больше 1. А так же задает нужные JS переменные ajaxurl — ссылка на стандартный обработчик WP, posts_vars — данные запроса, current_page — номер текущей страницы, max_pages — максимальное кол-во страниц.

Показать скрытый текст на JS

Сегодня мы научимся показывать и скрывать текст, при клике по кнопке, на чистом JavaScript. Такой прием обычно используют на сайтах, с целью экономии места, когда публикуют только часть информации и кнопку. При клике по кнопке, раскрывается остальная часть.

Демонстрация примера

HTML структура

Внутри тега p, поместим текст, разделим текст на две части, между ними поставим три точки, которые обернем в тег span с идентификатором dots. Вторую часть текста, так же обернем в тег span с идентификатором more. Ниже создадим кнопку и повесим на нее событие клика, при котором будет выполняться функция с названием showMore.

<p>
Повседневная практика показывает, что консультация с широким активом способствует подготовки <span >. </span><span > и реализации существенных финансовых и административных условий. </span>
</p>
<button onclick=»showMore()» >Показать больше</button>

CSS код

Изначально скроем вторую часть текста с идентификатором more.

На данный момент мы видим только первую половину текста, троеточие и кнопку. Далее запрограммируем нашу кнопку на JS.

JS код

Создадим функцию, с названием showMore, внутри функции объявим три переменные, которые будут получать элементы по названиям идентификаторов.

function showMore() <
var dots = document.getElementById(«dots»);
var moreText = document.getElementById(«more»);
var btnText = document.getElementById(«btn»);

Теперь нам надо сделать проверку, видимы ли точки? Если невидимы (display находится в состоянии none. ), то показываем точки, меняя значение none на inline, а текст в переменной moreText скрываем. На кнопке прописываем текст: «Показать больше».

if (dots.style.display === «none») <
dots.style.display = «inline»;
btnText.innerHTML = «Показать больше»;
moreText.style.display = «none»;
>

На данный момент у нас вторая часть текста скрыта. Напишем вторую часть условия, что делать, в противном случае. Делаем все с точностью наоборот, точки скрываем, а текст показываем.

else <
dots.style.display = «none»;
btnText.innerHTML = «Показать меньше»;
moreText.style.display = «inline»;
>
>

Условный оператор if-else, работает по принципу: или так / или сяк, одно из условий должно выполняться.

Добавим ещё CSS стилей для красоты

div <
background: #f2eaea;
margin: 0 auto;
max-width: 600px;
padding: 20px;
>

#btn <
background: #2196F3;
border: none;
font-size: 18px;
font-weight: bold;
color: white;
padding: 10px;
text-transform: uppercase;
>

Если хотите научиться создавать на нативном JavaScript больше интерактивных компонентов, то Вам в помощь, этот замечательный видеокурс «JavaScript, jQuery и Ajax с Нуля до Гуру».

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 1 ):

Здравствуйте Михаил. Подскажите пожалуйста как мне скрыть половина текста с МАРКОЙ АВТО? https://doskavsem.ru/board/avtomobili/legkovye-avtomobili-618.html

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.