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

Обновлено: 05.07.2024

Я пытаюсь создать небольшой скрипт, который показывает различные скрытые элементы HTML после нажатия кнопки или ссылки.

Требования:

Изменить текст кнопки: Переключить текст кнопки с Показать больше элементов на Скрыть элементы после нажатия кнопки. (И наоборот) Многократное свертывание: скрипт должен сделать видимыми несколько элементов Приятно иметь: display: none не закодированный в исходный код, но расположенный в таблице стилей Нет jQuery или фреймворков - Чистый минимальный легкий JavaScript

База скриптов:

Я использовал этот скрипт Pure Javascript Show/Hide Toggle в качестве основы и изменил его.

Мой модифицированный фрагмент кода:

Codepen:

Проблема:

Моя модификация не показывает скрытые элементы. Я уже потратил несколько часов на решение этой проблемы, но сценарий не работает. Любые идеи от JavaScript-профессионала, как показать и скрыть несколько элементов при нажатии кнопки переключения?

Вам нужен querySelectorAll вместо querySelector для извлечения и итерации по нескольким элементам. Я бы предложил вместо этого использовать класс .hidden , а затем вы можете .hidden-item и просто переключать класс на каждом:

.querySelector() возвращает первый элемент, соответствующий запросу. Вам понадобится .querySelectorAll() чтобы получить все совпадения, а затем вам придется перебрать все найденные элементы, чтобы определить, должны ли они быть скрыты или нет. Избегайте .getElementsByClassName() поскольку это возвращает "список .getElementsByClassName() узлов", который не подходит для большинства случаев использования и снижает производительность.

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

Кроме того, по возможности избегайте встроенных стилей. Просто установите классы CSS заранее и добавьте или удалите их с помощью element.classList.add() и element.classList.remove() .

Наконец, используйте .innerHTML только в том .innerHTML если строка, которую вы получаете/настраиваете, на самом деле содержит HTML, который необходимо проанализировать, и когда вы полностью контролируете эту строку. При неправильном использовании он тратит ресурсы и может открыть дыры в безопасности вашего кода. Если строка, с которой вы работаете, не содержит HTML или не нуждается в синтаксическом .textContent анализатором HTML, используйте .textContent .

Свойство text-overflow: ellipsis не поддерживает многострочность. Но я вспомнил о свойстве line-clamp , которое позволяет обрезать многострочный текст.

Я разместил чекбокс прямо перед абзацем, поэтому можно использовать псевдокласс :checked для активации усечения текста:

Но как насчет доступности?

Хак с чекбоксом не только семантически неправильный, но и ограничивает возможности доступа к функционалу для людей с плохим зрением. При этом присваивается для чекбокса свойство display: none. Из-за этого нарушается навигация с помощью клавиатуры. Нельзя использовать скрытый чек-бокс , а использование метки не помогает. Событие нажатия клавиши пробела/ввода не перенаправляют событие в чекбокс.

Чтобы решить эту проблему, я сделал чекбокс фокусируемым, хоть и все еще невидимым.

Теперь чекбокс можно выделить, но без скринридера нельзя узнать, установлен он или нет, так как невидим. Чтобы решить эту проблему, я заставил label наследовать стиль фокуса браузера по умолчанию, когда чекбокс выделен:

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

Как отображать кнопку динамически?

Но как динамически отображать кнопку, когда текст в абзаце слишком длинный, чтобы поместиться в контейнер. Это единственная функция, которую я не смог реализовать с помощью CSS. Потому что она требует применения селектора :truncated :

Поэтому реализовать это можно только с помощью JavaScript. Например:

А вот расширенная демо-версия:

Пожалуйста, оставляйте свои отзывы по текущей теме материала. За комментарии, подписки, дизлайки, отклики, лайки огромное вам спасибо!

Пожалуйста, опубликуйте свои мнения по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, отклики, лайки, подписки, дизлайки!

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

Она пока никак не реагирует потому, что мы не повесили на нее никакого события. И давайте рассмотрим первый вариант.

Функция по нажатию кнопки в JavaScript

Событие по клику на кнопку мы создали, но можно сделать то же самое, только напишем функцию, с именем.

А к кнопке добавим эту функцию:

Вывод на страницу по клику на кнопку в JS

Соответственно по нажатию на кнопку в JavaScript можно делать не только всплывающий alert, но и все, что угодно, передавать данные на сервер, изменять элементы на странице, удалять, копировать и много чего еще. Давайте рассмотрим еще один пример. напишем небольшую функцию, которая будет срабатывать по клику и выводить на страницу случайное число. Для этого под кнопкой добавим элемент DIV с классом sum, в котором будем выводить результат работы JavaScript функции.

function randomSum(min, max)

Для кнопки добавим эту функцию по нажатию:

По нажатию на кнопку под ней будет выведено четырехзначное число от 1000 до 9999 в случайном порядке. Это мы указали в специальных параметрах min и max.

Нажатие правой кнопкой мыши в JS

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

Запрещаем вывод контекстного меню при клике правой кнопкой мыши:

Это простейший вызов функции по клику в JavaScript и усваивается без особых трудностей. В дальнейшем рекомендую изучать более сложные функции, которые делают различные операции. Например считают сумму, как в калькуляторе расчета стоимости. Надеюсь этот урок оказался для вас полезным. Если остались вопросы, вы всегда можете задать их в комментариях.

Как всегда интересно и доступно. Намедни, писал калькулятор расчёта цены металлической решётки на JS и пытался вызвать срабатывание двух фуекций одновременно по нажатию кнопки. Запускались два массива радиокнопок с разными именами и дальше использовались для расчётов. Не получилось и даже пишут, что это не возможно.
Интересует ваше мнение вызова нескольких функций по нажатию только одной кнопки.

Проблем с запуском 2-х функций в JS возникать не должно. Просто эти функции нужно написать отдельно. Возможно у вас какой-то конфликт в коде.

Имеется в виду есть 2 групы или более радио кнопок с возможностью выбора только одной кнопки в каждой группе по параметру value. Хотелось бы написать один код, в котором поставив чекбоксы в радио кнопках использовать их значениня value в этом коде дальше по нажатию кнопки РАССЧИТАТЬ. Каждая группа кнопок перебирается в цикле и определяется значение value одной и второй группы. На самом деле, записав оба цикла последовательно в коде не удаётся далье воспользоваться полученными значениями велью. Если радио кнопки не зависимые, тогда всё в порядке, а если с одним именем не получается.

Не совсем понял. Можно попробовать использовать this и написать один цикл.

Спасибо. Буду пробовать.

Всплывает модальное окно подписки и зависает. Дальше не реагирует.

Доброго времени суток! а как быть в случае когда надо на одной странице несколько раз выполнить одинаковый код обновление div-а с помощью Ajax?
Пример: есть страница строки/столбцы. В одном из столбцов (для каждой строки) есть номер и ттн. По нажатию на кнопку происходит отправка данных. php возвращает некий ответ. Этот ответ отображается в div под кнопкой отправки. Но такая конструкция срабатывает только один раз для первого элемента

Вам скорее всего нужен формат Json. Об этот я писал здесь.

Данные отправляются через эту конструкцию нормально. php тоже отрабатывает возвращая нужную строку. После в строке success результат от php присваивается некому div-у на странице. Но если это код повторить несколько раз на одной странице то все, которые ниже уже не работают (я так понимаю, что это из за уникальности id-шников)

Соответственно id должны быть разными.

Добрый день , Ребята кто может помочь за $ единоразово отредактировать javascript? Буду очень благодарен .!

Давайте рассмотрим реализацию кнопки для скрытия части контента на HTML с использованием JavaScript. При нажатии на кнопку будет появляться скрытый контент. В записи представлены простые стили для большей гибкости, вы можете сами стилизовать элементы.

Lorem Ipsum – это текст-“рыба”, часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной “рыбой” для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.

Простая кнопка скрывающая часть контента

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

.container_for_tab – контейнер в котором находятся все внутренности таба,
.but_for_tab – кнопка для открытия,
.tab_content – блок со скрытым контентом,
.hidden_block – класс которому мы будим добавлять свойства display: none для скрытия блока,
.visible_block – класс которому мы будим добавлять свойства display: none для проявления блока.

Здесь простые стили для кнопки и стили для элемента hidden_block и visible_block .

JavaScript

Всю работу выполняет JavaScript функция представленная ниже. В качестве параметра вам нужно передать элементы участвующие в реализации.

Простая кнопка скрывающая часть контента + иконкой

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

Указав соответствующий класс вы можете указать свои иконки.

Здесь из нового мы добавим только иконку через элемент с определенным классом и спец. классом для создания иконки.

JavaScript

В JavaScript мы добавим код проверки на наличие иконки и добавим переменную в которую запишем элемент иконки.

Простая кнопка скрывающая часть контента + меняющаяся надпись

Добавим новый элемент в который пропишем текст для кнопки. Текст кнопки “Показать ещё” будем менять на “Скрыть”.

JavaScript

Вам также будет интересно

Готовая форма с отправкой информации через ajax в Telegram

Готовая форма с отправкой файла drag & drop. Поле для передачи файла с помощью перетаскивания его в область

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

Пусть для разминки у нас есть абзац и две кнопки:

Получим ссылки на наши элементы в переменные:

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

Решим нашу задачу:

Модифицируйте мой код так, чтобы была только одна кнопка. Пусть по первому клику на эту кнопку элемент показывается, а по второму - скрывается.

Читайте также: