Знаете ли, че има собствено HTML5 решение за много лесно създаване на акордеонен бутон за четене повече/по-малко, за да скриете и разкриете съдържание с БЕЗ JavaScript или CSS. Прочетете, за да разберете как.
- намлява HTML5 таговете официално са a елемент на джаджа за разкриване, Но сдвоени с HTML5 таговете ще ви дадат a акордеон само с чист HTML.
Значение без JS ИЛИ CSS е необходимо. Колко готино е това!
Ето пример, показващ прост елемент с a намлява .
Ето кода:
<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;
}По подразбиране курсорът изглежда като стрелка, но ако искате да бъде a сочеща ръка вместо това използвайте това:
details {
cursor: pointer;
}Поведение
Задаването на поведение е много ограничено, наистина има само едно нещо, което можете да направите и това е да направите разкрития текст отворен по подразбиране.
За да стартирате акордеона в отворено състояние, добавете Boolean отворен атрибут на етикет:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Вижте повече
Това е естествен HTML5 акордеон за скриване и разкриване на съдържание. Доста готино, нали?
Какви атрибути мога да използвам?
Атрибутите по-долу могат да се използват за етикет:
| Атрибут | Стойност | Oбобщение |
|---|---|---|
| отворен | отворен | По подразбиране е не отворен. |
| id | стойност | Осигурява уникален идентификатор. |
| клас | имена на класове | Присвоява имена на класове на елемента. |
| стил | CSS-стойности | Присвоява CSS стилове на елемента. |
И така, какви са ограниченията? Винаги има уловка, нали?
Няма поддръжка за Internet Explorer
Този акордеон само за HTML5 няма да работи в нито една версия на Internet Explorer. Ако трябва да поддържате IE11, ще трябва да използвате различно резервно решение, използвайки JQuery. Поддържат се всички други браузъри намлява .
Без персонализирани анимации или преходи
Въпреки че можете да променяте и стилизирате външния вид (както е показано по-горе), няма да можете да правите анимации или преходи за разкриване на текст. Ако искате да направите това, ще ви трябва друго CSS/JSS акордеонно решение.
Екранни четци и достъпност
Това е родно HTML5 и той *трябва да бъде* достъпен, но е установено, че действително разкритият текст не винаги се съобщава правилно от екранен четец.
Литература:
