Знаете ли вы, что существует собственное решение HTML5, позволяющее очень легко создать аккордеонную кнопку «Читать больше/меньше» для скрытия и отображения содержимого с помощью НЕТ JavaScript или CSS. Читайте дальше, чтобы узнать, как это сделать.
Ассоциация и Теги HTML5 официально элемент виджета раскрытия информации, Но в паре с Теги HTML5 дадут вам чистый HTML-аккордеон.
Смысл без JS или CSS нужно. Как это круто!
Вот пример, показывающий простой элемент с и .
Вот код:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>и вот как это будет выглядеть:
Узнать больше
Это собственный аккордеон HTML5 для скрытия и отображения контента. Довольно круто, правда?
Как это работает? Ассоциация Тег служит оболочкой для элемента, который можно открыть или закрыть. Пользователь должен нажать на метку, которая является тег, чтобы открыть или закрыть элемент.
Как насчет стиля и поведения?
Стили
Вы можете применить стили CSS, чтобы настроить внешний вид раскрывающегося текстового поля. Ниже приведен стиль интерфейса с вкладками:
details {
font: 16px "Open Sans", Calibri, sans-serif;
width: 620px;
}
details > summary {
padding: 2px 6px;
width: 15em;
background-color: #ddd;
border: none;
box-shadow: 3px 3px 4px black;
cursor: pointer;
}
details > p {
border-radius: 0 0 10px 10px;
background-color: #ddd;
padding: 2px 6px;
margin: 0;
box-shadow: 3px 3px 4px black;
}
details[open] > summary {
background-color: #ccf;
}По умолчанию курсор выглядит как стрелка, но если вы хотите, чтобы он был указательная рука вместо этого используйте это:
details {
cursor: pointer;
}поведения
Настройка поведения очень ограничена, на самом деле вы можете сделать только одно: сделать отображаемый текст открыто по умолчанию.
Чтобы запустить аккордеон в открытом состоянии, добавьте логическое значение открытый приписать тег:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Узнать больше
Это собственный аккордеон HTML5 для скрытия и отображения контента. Довольно круто, правда?
Какие атрибуты я могу использовать?
Следующие атрибуты можно использовать для тег:
| Атрибут | Значение | Обзор |
|---|---|---|
| открытый | открытый | По умолчанию это не открыто. |
| id | ценностное | Предоставляет уникальный идентификатор. |
| класс | имена классов | Присваивает имена классов элементу. |
| стиль | CSS-значения | Назначает стили CSS элементу. |
Итак, каковы ограничения? Всегда есть подвох, не так ли?
Нет поддержки Internet Explorer
Этот аккордеон только для HTML5 не будет работать ни в одной версии Internet Explorer. Если вам нужно, чтобы он поддерживал IE11, вам придется использовать другое резервное решение с использованием JQuery. Все остальные браузеры поддерживают и .
Никаких настраиваемых анимаций или переходов
Хотя вы можете изменять и стилизовать внешний вид (как показано выше), вы не сможете выполнять анимацию или переходы для отображения текста. Если вы хотите сделать это, вам понадобится другое решение для аккордеона CSS/JSS.
Программы чтения с экрана и специальные возможности
Это родной HTML5 и он *должен быть* доступен, но было обнаружено, что фактический отображаемый текст не всегда правильно объявляется программой чтения с экрана.
Ссылки:
