Главная » Программирование » jQuery: Показать-скрыть элемент, развернуть-свернуть под кат

jQuery: Показать-скрыть элемент, развернуть-свернуть под кат

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

jQuery— набор функций JavaScript, фокусирующийся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX. Разработка jQuery ведётся командой добровольцев на пожертвования.

HTML был одной из первых вещей, которую Джон Резиг освоил, когда он только начал заниматься программированием. Резиг программировал на QBasic, когда один его знакомый показал ему, как создать веб-страницу (используя Angelfire), а также основы HTML. Отец подарил ему на Рождество две книги по HTML. Именно тогда, когда он только начал программировать на Visual Basic, HTML и веб-дизайн очень заинтересовали его.

Wikipedia
Пример 1: Развернуть-свернуть элемент HTML

Решение 1. Для решения проблемы можно использовать Код №1. Данным скриптом можно развернуть-свернуть текст, блок или любой элемент из HTML, который можно как-то выбрать. Можно скрыть-показать блок полностью, если задать closeHeight = '0' . Если нужно чтобы кнопка «Развернуть» была всегда, то можно вынести содержимое из конструкции if(){}, а само условие удалить.

Код 1: Скрипт jQuery — Развернуть-свернуть элемент, кнопка Подробнее, Ещё…

Решение 2. Подобная необходимость развернуть текст может быть на странице с выводом каких-то постов, карточек, где есть длинный текст и его нужно частично скрыть под кат, добавив кнопку вроде «Читать ещё». В этом случае лучше использовать Код №2. В принципе, первый скрипт оттуда и был взят.

See the Pen
blog post
by Kocsten (@kocsten)
on CodePen.

Код №2: Свернуть-развернуть текст в массиве карточек, постов
0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

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

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии