Кнопка "показать ещё"
Есть 100 элементов с блоками.
Необходимо показать на странице первые 10 блоков.
При повторном клике на кнопку, показывать следующие 10 блоков.
Codepen я смотрел.
Вот только попытки Ваши закончились на box.slice(0,9)
Это потом Вы хоть что-то добавили.
Так как Grundy сделал мне выговор, который мы ещё обсудим, решил добавить ответ.
Всем блокам дать класс-невидимку, при каждом клике собрать все элементы с этим классом и с первых N элементов убрать невидимку, дать другой класс со стилями:
Вот красивое решение. В скрипте можно указать, какое количество элементов выводить. Когда все элементы уже показаны, то кнопка скрывается. Примеры:
Решение на JavaScript(jQuery). 100 элементов
Другое количество элементов (не кратное десяти)
Решение на нативном JavaScript
Кого интересует более проработанная версия, в адаптивных блоках в ряд 3 блока, плюс кнопка показать еще блоки с фото, показываем 6 блоков, но если надо подгрузить еще 6, нажимаем кнопку показать еще, если все фото загружены, кнопка исчезает. Код подгрузить еще блоки, позаимствовал у автора выше.
Для фото до и после, используется скрипт twentytwenty.
Таким способом можно показывать работы, до и после, ну и для другого применить.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.3.13.43308
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Кнопка «Показать еще» на HTML и CSS для сайта
Давайте разберем пример кнопки «Показать еще» на HTML и CSS для сайта. В этой статье узнаете про функцию, с которой можно отобразить больше контента в улучшенном интерфейсе при помощи кнопки «Загрузить еще» на CSS. Или по другому можно сказать, что произвести загрузку с большими возможностями на HTML и CSS. Как можно заметить ниже видео-обзор синие прямоугольники, которые созданы на li и ul теге HTML, но здесь также и div аналогично можно задействовать.
Безусловно, что показ контента вашего на сайте очень важен, но однако на веб-странице так много контента и очень мало места. И прежде чем гость или пользователь перестанет прокручивать страницу, и не найдет, то что ему нужно. И для этого был создан элемент функций для посетителей веб-сайта, где можно внедрить этот метод методы для отображения контента наиболее интуитивно понятным способом.
Теперь эту функцию, назовем ее «Загрузить больше» может быть реализован с помощью CSS, где не нужно применять jаvascript, JQuery или библиотеки. Также вы можете расположить изначально скрытым любой функционал или материал, но так, что изначально будет понятно, что при клике далее будет находиться. Но думаю вы поняли смысл этого материала, который самостоятельно можете создать.
Изначально при открытие сайта:
При клике с дальнейшим просмотром открывается остальная информация:
Пример Кнопки «Показать еще» для сайта
Теперь у вас есть представление о том, как будет выглядеть после полноценной установки. Где появляется большая возможность установить эту функцию на домашней странице своего веб-сайта или на странице портфолио.
Кнопка «Показать еще» на ajax. Подгрузка контента
В этой статье будет рассмотрена возможность реализации, наверняка, всем известного функционала — ajax подгрузка данных с сервера. Работу такого функционала хорошо демонстрирует кнопка «Показать еще», которая без перезагрузки страницы получает данные с сервера и отображает их на странице. Для примера можно выводить, например, новости. Как раз дамп тестовой таблицы новостей у меня есть в статье Пагинатор. Постраничный вывод данных на php.
Кнопка «Показать еще» на ajax. Код
Начнем, с того что подготовим базу данных, создадим таблицу с новостями и заполним ее тестовыми данными, можете воспользоваться sql дампом:
Как сверстать кнопку «показать больше»?
Добрый день! Я еще совсем зеленый верстальщик и никак не могу сообразить, как сверстать список товаров с кнопкой «Загрузить еще». В общих чертах представляю что js будет подгружать ajax’ом остальные товары, но откуда и как не пойму. Делать отдельно файл с товарами и брать оттуда?
Напишите пожалуйста логику, и ссылки где можно почитать или посмотреть примеры похожих решений.
- Вопрос задан более трёх лет назад
- 16262 просмотра
Оценить 1 комментарий
- Вконтакте
Вас, как верстальщика, тем более зеленого, не должны напрягать такой задачей. Ваша задача — сделать верстку.
Ну а в целом, по нажатию на кнопку отправляется запрос на сервер и с него подтягиваются данные, которые затем вставляются на страницу. Тут надо знать в каком виде сервер будет отдавать данные. Будут это готовые куски html кода, или чистые данные в json (следует согласовать с бэкенд-программистом)
В простом случае, когда у вас с сервера будут приходить куски html кода можно сделать примерно так (примеры с jQuery, так проще).
Ваша html разметка примерно такая (сначала блоки присустствующие на странице, потом пустой контейнер для подгружаемых и в конце кнопка)