Кнопка «показать ещё»
Есть 100 элементов с блоками.
Необходимо показать на странице первые 10 блоков.
При повторном клике на кнопку, показывать следующие 10 блоков.
var box = document.querySelectorAll('.box'); var btn = document.getElementsByTagName('button'); console.log(box); btn = addEventListener("click", function() < box.slice(0, 9); >).wrapper-boxes < display: flex; flex-direction: row; flex-wrap: wrap; >.box < margin: 5px; width: 100px; height: 100px; background-color: orange; border-radius: 3px; >button
Отслеживать
28.2k 12 12 золотых знаков 76 76 серебряных знаков 143 143 бронзовых знака
задан 19 фев 2020 в 19:16
slobodianiukvitali slobodianiukvitali
179 1 1 золотой знак 2 2 серебряных знака 9 9 бронзовых знаков
Как показывать 10+ элементов?
19 фев 2020 в 19:20
Вариантов на вскидку как минимум 3. Как Вы пробовали делать? И пробовали ли вообще?
19 фев 2020 в 19:22
тож кинул вам кодепен с тем что на работал вы вооюбще смотрели.
19 фев 2020 в 19:25
Код нужно вставлять сразу в вопрос
19 фев 2020 в 19:36
Показывать это значить показать ещё +10 блоков
19 фев 2020 в 19:56
5 ответов 5
Сортировка: Сброс на вариант по умолчанию
Codepen я смотрел.
Вот только попытки Ваши закончились на box.slice(0,9)
Это потом Вы хоть что-то добавили.
Так как Grundy сделал мне выговор, который мы ещё обсудим, решил добавить ответ.
window.onload = function () < var box=document.getElementsByClassName('box'); var btn=document.getElementById('button'); for (let i=10;ivar countD = 10; btn.addEventListener("click", function() < var box=document.getElementsByClassName('box'); countD += 10; if (countD > >) >
body < background: blue; >.wrapper-boxes < display: flex; text-align: center; flex-direction: row; flex-wrap: wrap; width: 79%; >.box < margin: 5px; width: 100px; height: 100px; background-color: orange; border-radius: 3px; >button
Отслеживать
ответ дан 19 фев 2020 в 21:12
Denis640Kb Denis640Kb
14.1k 5 5 золотых знаков 22 22 серебряных знака 46 46 бронзовых знаков
Когда там @Grundy тебе выговор делал? 🙂
19 фев 2020 в 22:43
box — можно один раз получить, не нужно проходить по уже видимым элементам при каждом нажатии кнопки
19 фев 2020 в 23:11
Всем блокам дать класс-невидимку, при каждом клике собрать все элементы с этим классом и с первых N элементов убрать невидимку, дать другой класс со стилями:
var more = document.querySelectorAll('.more'); for (var i = 0; i < more.length; i++) < more[i].addEventListener('click', function() < var showPerClick = 3; var hidden = this.parentNode.querySelectorAll('div.hidden'); for (var i = 0; i < showPerClick; i++) < if (!hidden[i]) return this.outerHTML = ""; hidden[i].classList.add('box'); hidden[i].classList.remove('hidden'); >>); >.wrapper-boxes < display: flex; flex-direction: row; flex-wrap: wrap; >.box < margin: 1px; width: 20px; height: 20px; background-color: orange; >.hidden
Отслеживать
ответ дан 19 фев 2020 в 23:28
OPTIMUS PRIME OPTIMUS PRIME
27.1k 3 3 золотых знака 23 23 серебряных знака 48 48 бронзовых знаков
Очень интересно, откуда вдруг два минуса))
22 фев 2020 в 18:30
@OPTIMUS PRIME Вот очень много людей с негативным предвзятым отношением. Я всё тоже стараюсь не обращать на них внимание, но они постоянно портят всё настроение. От меня тоже большой плюс.
24 фев 2020 в 12:12
Вот красивое решение. В скрипте можно указать, какое количество элементов выводить. Когда все элементы уже показаны, то кнопка скрывается. Примеры:
Решение на JavaScript(jQuery). 100 элементов
$(document).ready(function() < var list = $(".wrapper-boxes .box"); var numToShow = 10; //сколько показывать элементов var button = $("button"); var numInList = list.length; list.hide(); if (numInList >numToShow) < button.show(); >list.slice(0, numToShow).show(); button.click(function() < var showing = list.filter(':visible').length; list.slice(showing - 1, showing + numToShow).fadeIn(); var nowShowing = list.filter(':visible').length; if (nowShowing >= numInList) < button.hide(); >>); >);.wrapper-boxes < display: flex; flex-direction: row; flex-wrap: wrap; counter-reset: albumList; >.box < position: relative; margin: 5px; width: 100px; height: 100px; background-color: orange; border-radius: 3px; >button < width: 550px; line-height: 40px; background-color: orange; border: 4px solid #fff; color: #fff; >.box:after
Другое количество элементов (не кратное десяти)
$(document).ready(function() < var list = $(".wrapper-boxes .box"); var numToShow = 10; //сколько показывать элементов var button = $("button"); var numInList = list.length; list.hide(); if (numInList >numToShow) < button.show(); >list.slice(0, numToShow).show(); button.click(function() < var showing = list.filter(':visible').length; list.slice(showing - 1, showing + numToShow).fadeIn(); var nowShowing = list.filter(':visible').length; if (nowShowing >= numInList) < button.hide(); >>); >);.wrapper-boxes < display: flex; flex-direction: row; flex-wrap: wrap; counter-reset: albumList; >.box < position: relative; margin: 5px; width: 100px; height: 100px; background-color: orange; border-radius: 3px; >button < width: 550px; line-height: 40px; background-color: orange; border: 4px solid #fff; color: #fff; >.box:after
Решение на нативном JavaScript
document.addEventListener("DOMContentLoaded", function() < const limit = 10; const nextOpen = (wrapper, button) => < const boxs = wrapper.querySelectorAll(".box"), len = boxs.length - 2, endBox = wrapper.querySelector(".nextstop"), index = [. boxs].indexOf(endBox) + limit; if (endBox) endBox.classList.remove("nextstop"); if (index < len) boxs[index].classList.add("nextstop"); else button.remove() >document.querySelectorAll(".wrapper-boxes").forEach(wrapper => < const button = wrapper.nextElementSibling; button.addEventListener("click", nextOpen.bind(null, wrapper, button)); nextOpen(wrapper, button); >) >);.wrapper-boxes < display: flex; flex-direction: row; flex-wrap: wrap; counter-reset: albumList; >.box < position: relative; margin: 5px; width: 100px; height: 100px; background-color: orange; border-radius: 3px; >button < width: 550px; line-height: 40px; background-color: orange; border: 4px solid #fff; color: #fff; >.box:after < counter-increment: albumList; content: counter(albumList); position: absolute; top: 10%; left: 10%; padding: 4% 7%; border-radius: 5%; border: 1px solid lightgray; text-align: center; background-color: white; font-size: 2vw; font-weight: bold; font-family: monospace; box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.33) inset; >.box.nextstop~.box
Отслеживать
ответ дан 19 фев 2020 в 22:29
Sevastopol’ Sevastopol’
28.2k 12 12 золотых знаков 76 76 серебряных знаков 143 143 бронзовых знака
jQuery(document).ready(function($)< $(".show-more-btn").click(function(e)< $(".show-more-item:hidden").slice(0,3).fadeIn(); if ($(".show-more-item:hidden").length < 1) $(this).fadeOut(); >) >) blah blah blah blah Load More* < padding: 0; margin: 0; box-sizing: border-box; >body < background: #e9ecef; >h3 < background: #1C1D1F; color: white; width: 80%; text-align: center; margin: 15px auto; padding: 10px; >ul < width: 50%; margin-left: auto; margin-right: auto; list-style-type: none; background: white; >li < height: 50px; line-height: 50px; border-top: 1px solid #e9ecef; >ul a < display: block; height: 100%; text-decoration: none; color: black; padding-left: 10px; position: relative; transition: background .3s; >ul a:after < content: '⇢'; position: absolute; right: 10px; >ul a:hover < background: #cdcbc4; >/* CHECKBOX CONTAINER STYLES –––––––––––––––––––––––––––––––––––––––––––––––––– */ .container < position: relative; height: auto; border-top: 0; >[type="checkbox"] < position: absolute; left: -9999px; >label < background: #e4e3df; display: block; width: 100%; height: 50px; cursor: pointer; position: absolute; top: 0; transition: top .45s cubic-bezier(.44, .99, .48, 1); >/* * use the rule below for testing purposes * label:hover < * background: yellow; * >*/ label:before, label:after < position: absolute; >label:before < content: 'More'; left: 10px; >label:after < content: '⇣●'; right: 10px; -webkit-animation: sudo .85s linear infinite alternate; animation: sudo .85s linear infinite alternate; >@keyframes sudo < from < -webkit-transform: translateY(-2px); transform: translateY(-2px); >to < -webkit-transform: translateY(2px); transform: translateY(2px); >> input[type="checkbox"] ~ ul < width: 100%; overflow: hidden; max-height: 0; transition: max-height .45s cubic-bezier(.44, .99, .48, 1); >/* CHECKED STATE STYLES –––––––––––––––––––––––––––––––––––––––––––––––––– */ [type="checkbox"]:checked ~ ul < /** * the value of the `max-height` property specifies the transition speed * set a very big value (e.g. 9999px) to see the difference */ max-height: 300px; >[type="checkbox"]:checked + label < top: 100%; >[type="checkbox"]:checked + label:before < content: 'Less'; >[type="checkbox"]:checked + label:after < content: '⇡●'; >ul li:last-child
Отслеживать
ответ дан 15 апр 2020 в 11:09
USERNAME GOES HERE USERNAME GOES HERE
10.4k 21 21 золотой знак 25 25 серебряных знаков 53 53 бронзовых знака
Кого интересует более проработанная версия, в адаптивных блоках в ряд 3 блока, плюс кнопка показать еще блоки с фото, показываем 6 блоков, но если надо подгрузить еще 6, нажимаем кнопку показать еще, если все фото загружены, кнопка исчезает. Код подгрузить еще блоки, позаимствовал у автора выше.
Для фото до и после, используется скрипт twentytwenty.
Таким способом можно показывать работы, до и после, ну и для другого применить.
//подгрузить еще по кнопке, если все элемнты подгружены, скрывает кнопку $(window).on('load', function() < initTwenty(); >); // Фото, до и после function initTwenty() < $(".twentytwenty").twentytwenty(< no_overlay: false, // Не показывать наложение было, стало, true скрыть // Перемещать ползунок при наведении курсора мыши move_slider_on_hover: false, // Разрешить пользователю проводить пальцем в любом месте // изображения для управления движением ползунка. move_with_handle_only: true, before_label: 'До', after_label: 'После' >); > $(document).ready(function() < var list = $(".gggggggg .twentytwenty"); var numToShow = 6; //сколько показывать элементов var button = $("button"); var numInList = list.length; list.hide(); if (numInList >numToShow) < button.show(); >list.slice(0, numToShow).show(); button.click(function() < var showing = list.filter(':visible').length; list.slice(showing - 1, showing + numToShow).fadeIn(); var nowShowing = list.filter(':visible').length; if (nowShowing >= numInList) < button.hide(); >initTwenty(); >); >);
.prfota < margin: 0 0 -40px -40px; >.twentytwenty-wrapper < -webkit-box-flex: 0; -ms-flex: 0 0 calc(33.333333% - 0px); flex: 0 0 calc(33.333333% - 0px); -webkit-box-sizing: border-box; box-sizing: border-box; >.twentytwenty-container < margin: 0 0 40px 40px; >.gggggggg button < width: 280px; height: 60px; line-height: 60px; border: 1px solid #CB002B; background: #fff; font-weight: 600; text-align: center; color: #282725; text-transform: uppercase; border-radius: 90px; margin-top: 40px; >.gggggggg button:hover < background: #282725; border: 1px solid #282725; color: #fff; >.wr < -ms-flex-wrap: wrap; flex-wrap: wrap; >.prfota
Кнопка Показать больше/Показать меньше
Сниппет, создающий кнопку, которая раскрывает дополнительный текст на JavaScript.
Пример текста
Как уже неоднократно упомянуто, стремящиеся вытеснить традиционное производство, нанотехнологии освещают чрезвычайно . интересные особенности картины в целом, однако конкретные выводы, разумеется, объединены в целые кластеры себе подобных! Прежде всего, курс на социально-ориентированный национальный проект прекрасно подходит для реализации системы массового участия.
Шаг 1) Добавляем HTML:
Как уже неоднократно упомянуто, стремящиеся вытеснить традиционное производство, нанотехнологии освещают чрезвычайно. интересные особенности картины в целом, однако конкретные выводы, разумеется, объединены в целые кластеры себе подобных! Прежде всего, курс на социально-ориентированный национальный проект прекрасно подходит для реализации системы массового участия.
Шаг 2) Добавляем CSS:
#more
Шаг 3) Добавляем JavaScript:
Кнопка показать больше, как сделать что бы скрывала только часть текста?
codepen.io/freeman0204/pen/jqRQzB кнопка сейчас скрывает все, а мне нужно что бы изначально было видно например 3 сроки а то что ниже скрыто, и кнопка открывала и скрывала тот текст что ниже. Как сделать это лаконично?
- Вопрос задан более трёх лет назад
- 27874 просмотра
Комментировать
Решения вопроса 1
А вы сделайте блок, в который не всё влазит. CSS-класс с конкретной высотой и overflow-y: hidden;
По нажатию на «показать всё» CSS-класс удалять, и блок сам развернётся «во весь рост».
Ответ написан более трёх лет назад
freeman0204 @freeman0204 Автор вопроса
Сделал codepen.io/freeman0204/pen/jqRQzB но мне нужно что бы плавно было и если нажать еще раз то назад скрылось. Как это сделать?
https://jsfiddle.net/oy3zo0un/1/ решение корявенькое, но работает)
Ответы на вопрос 0
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- JavaScript
- +1 ещё
Как создать форму калькулятор отправкой на емайл?
- 1 подписчик
- 34 минуты назад
- 28 просмотров
Кнопка «Показать ещё» на чистом JavaScript
Кнопка «Показать ещё» обычно применяется, когда у нас очень много контента и его нужно вывести не весь сразу, а постепенно (небольшими порциями). Для этого весь контент разбивается на страницы.
При этом сначала отображается только первая страница (на этом примере это две карточки) и кнопка «Загрузить ещё» . Если пользователь хочет посмотреть ещё записи ( следующую страницу ), то он просто нажимает на кнопку .
Это похоже на постраничную навигацию, но только предыдущие записи остаются на месте, а новые добавляются после них . При этом обычно это на сайте реализуется с использованием AJAX, то есть без перезагрузки страницы.
Шаг 1. Написание backend-кода на PHP
Перед тем как перейти к разработке frontend-кода, необходимо сначала написать серверный сценарий, который будет обрабатывать наш запрос и возвращать ответ в формате JSON. Можно конечно и в формате HTML, но это уже будет очень простой случай, который в рамках этой статьи рассматривать не будем.
Серверный сценарий напишем, например, на PHP. Кроме этого, не забываем, чтобы он работал необходимо установить веб-сервер с поддержкой PHP на локальную машину.
Для написания кода на PHP создадим файл, например, с именем more.php в корне сайта.
Данные в этом примере будем получать для простоты из подготовленного массива, а не из базы данных:
$items = [ [ 'title' => '. ', 'img' => '1.png', ], [ 'title' => '. ', 'img' => '2.png', ], // . ];Количество записей на одной странице будем определять с помощью константы LIMIT :
const LIMIT = 2;Сейчас у нас одна страница будет состоять из 2 записей. Всего записей (элементов в массиве) узнаем с помощью функции count :
$total = count($articles);Номер страницы ( page ) будем передавать серверу через POST. В скрипте на PHP для получения этого значения воспользуемся глобальной переменной $_POST[‘page’] :
$page = (int)($_POST['page'] ?? 1);Дополнительно на странице клиента будем отображать кроме самих данных ещё их оставшееся количество. Вычисление оставшегося количества записей будем выполнять следующим образом:
$remain = $total - $page * LIMIT;Сами отдаваемые данные будем получать как срез массива с помощью array_slice :
$data = array_slice($items, ($page - 1) * LIMIT, LIMIT);Кроме этого, клиенту будем передавать шаблон, который затем с помощью JavaScript будем использовать для генерации HTML-кода карточки:
$template = 
{{title}} 
