Создаем блоки раскрывающегося текста на HTML, CSS и JavaScript
В этой статье описывается, как без использования сторонних библиотек с помощью HTML, CSS и JavaScript создать раскрывающийся текст. Вот как этот элемент интерфейса выглядит в действии.
Подходы
Для создания подобных панелей расширения используется несколько подходов:
- На основе анимации и переходов, примененных к свойствам height или max-height контента.
- Использование transform: translateY для перемещения элементов на новую позицию, создания эффекта закрытия панели и повторной визуализации DOM.
- Применение сторонней библиотеки.
Какой из подходов лучше?
С точки зрения производительности использование transform более эффективно, чем анимация height и max-height. При применении CSS-свойства transform элементы растризуются и перемещаются графическим процессором. Это низко затратная и простая операция для графического процессора.
Для реализации данного подхода нужно выполнить следующие действия:
- Получить высоту контента, который будет располагаться на панели.
- Переместить контент выше на высоту содержимого, которое будет свернуто с помощью transform: translateY(Xpx). С помощью перехода реализовать эффект открытия и закрытия панели.
- С помощью JavaScript перехватить событие transitionend. После его наступления задаем display: none для контента и удаляем преобразование.
Но у данного метода есть множество недостатков. Например, при использовании transform: translateY необходимо учитывать z-index элемента.
Поэтому проще с помощью JavaScript обернуть все, что вы хотите переместить, в контейнер и переместить его. Вот пример использования данного подхода.
Применение переходов к max-height работает не так хорошо, как свойство transform. Так как браузер изменяет высоту сворачивающегося элемента на протяжении всего перехода. Эта операция потребляет много ресурсов памяти и графического процессора. Но зато данный подход проще в реализации.
Подход на основе элементов details и summary
В HTML существуют элементы details и summary, которые позволяют создать панель расширения:
Кроме этого элемент details поддерживает JavaScript-событие toggle. Поэтому можно изменять HTML в зависимости от того, скрыто или отображается содержимое панели.
Но элементы details и summary не анимируются и к ним нельзя применять переходы. Поэтому используем другие средства.
Шаблон разметки
Основная разметка будет выглядеть следующим образом:
У нас есть внешний контейнер, который оборачивает расширяемый блок. Первым элементом является кнопка. За ней идет блок содержимого, которое будет скрываться, и отображаться с помощью пользовательских свойств CSS, переходов и JavaScript.
Базовая логика
- После загрузки веб-страницы измеряем высоту содержимого.
- Устанавливаем высоту содержимого в контейнере в качестве значения пользовательского свойства CSS.
- Скрываем содержимое, добавив к нему атрибут aria-hidden: «true».
- Устанавливаем max-height в качестве значения пользовательского свойства.
- Нажатие кнопки изменяет значение свойства aria-hidden с true на false. А также max-height содержимого с 0 на высоту, заданную в пользовательском свойстве. Затем с помощью переходов реализуем визуальный эффект.
JavaScript-код
Как насчет нескольких блоков?
Если на странице есть несколько раскрывающихся блоков, то нужно будет перебрать их все. Но только в том случае, если они разного размера. Для этого используйте querySelectorAll, чтобы получить все контейнеры и повторно задать пользовательские переменные через forEach.
setTimeout
Метод setTimeout с продолжительностью 0 до вывода контейнера используется для первоначального вывода веб-страницы. Это позволяет получить высоту контента.
Когда страница готова
Кроме этого можно обернуть код блока в функцию, которая инициализируется при загрузке страницы. Например:
Мы добавим ее в ближайшее время.
Дополнительные атрибуты data для контейнера
Мы добавляем атрибут data тогда, нужно что-то нужно изменить, когда панель открывается / закрывается. Например, цвет какого-то элемента.
Значение по умолчанию для пользовательского свойства
По умолчанию для пользовательского свойства установлено значение 1000px. Оно указывается после запятой внутри значения: var(—containerHeight, 1000px). Вы можете установить другое значение.
Почему бы не использовать значение по умолчанию 10000000px?
Проблема заключается в том, что переход всегда будет выполняться от этой высоты. Если длительность перехода установлена в 1 сек., переход будет выполняться со скоростью 10000000 пикселей в секунду. Если контент имеет высоту всего 50px, то вы получите довольно быстрый эффект открытия / закрытия.
Тернарный оператор для переключателей
Тернарный оператор является укороченной формой if / else. В нем сначала указывается условие, которое нужно проверить. Затем ? отделяет код для выполнения, если true. После : идет код, который будет выполняться, если проверка ложна.
Что происходит при изменении размера окна браузера?
При изменении размера окна браузера высота контента тоже может измениться. В подобном случае придется повторно установить высоту контейнеров. Для этого можно использовать две функции: одну – для установки высоты, другую – для взаимодействия. А также добавить для окна браузера два прослушивателя: для перехвата события загрузки страницы и события изменения размера.
Повышаем доступность (Accessibility)
Чтобы повысить доступность создаваемой панели, используйте атрибуты aria-expanded, aria-controls и aria-labelledby. Это даст вспомогательным технологиям лучшее представление о том, когда панели будут открыты / раскрыты. Мы добавляем aria-expanded=»false» к кнопке и aria-controls=»IDofcontent», где IDofcontent — это идентификатора контейнера с контентом.
Затем мы используем другой тернарный оператор для переключения в JavaScript атрибута aria-expanded по клику.
Все вместе
Полная версия JavaScript-кода примера:
Вы также можете поэкспериментировать с кодом, размещенным на CodePen
Заключение
Возможно, это не самый эффективный метод реализации панелей расширения. Но для большинства ситуаций он подходит.
Дайте знать, что вы думаете по этой теме в комментариях. За комментарии, лайки, отклики, дизлайки, подписки огромное вам спасибо!
Дайте знать, что вы думаете по этой теме статьи в комментариях. Мы очень благодарим вас за ваши комментарии, отклики, дизлайки, подписки, лайки!
Вадим Дворников автор-переводчик статьи « Make Your Own Expanding And Contracting Content Panels »
Как сделать чтобы при нажатии на кнопку появлялся текст html
<script language=»javascript»>
var timerID = 0;
var timerRunning = false;
var charNo = 0;
var charMax = 0;
var textLine = «Michael Rusakov — Personal Web Site»; //Текст на кнопке
var urlLine = «http://www.myrusakov.ru»; //Адрес перехода после нажатия
function startShow() <
stopShow();
showLine();
timerRunning = true;
>
function stopShow() <
if (timerRunning) <
clearTimeout(timerID);
timerRunning = false;
>
>
function showLine() <
charMax = textLine.length;
if (charNo <= charMax) <
document.animationbutton.but.value = textLine.substring(0, charNo);
document.animationbutton.but.style.color = «red»;
charNo++;
timerID = setTimeout(«showLine()», 100);
>
else <
charNo = 0;
timerID = setTimeout(«showLine()», 3000);
>
>
function gotoURL() <
location.href = urlLine;
>
</script>
<form name = «animationbutton»>
<input type = «button» name = «but» onClick = «gotoURL()»>
</form>
Как сделать, чтобы при клике на кнопки появлялся текст? [закрыт]
Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы он был сосредоточен только на одной проблеме.
Закрыт 2 года назад .
Как сделать, чтобы при клике на кнопки «web design», «mobile app», «branding» появлялся текст?
Такая штука называется «Tabs» (Вкладки), вариантов реализации вагон, но мне нравится на js\jq.
Вот мой вариант реализации:
Это простые табы. Вот вариант с помощью jQuery:
Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2022.6.10.42345
Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.