Przykład 2
<details>: Element ujawniający szczegóły
Element HTML <details> tworzy widżet rozwijający, w którym informacje są widoczne tylko wtedy, gdy widżet jest przełączony w stan "otwarty". Podsumowanie lub etykieta muszą być dostarczone przy użyciu elementu <podsumowanie>.
Widżet rozwijania jest zazwyczaj prezentowany na ekranie za pomocą małego trójkąta, który obraca się (lub obraca), aby wskazać status otwarte/zamknięte, z etykietą obok trójkąta. Zawartość elementu jest używana jako etykieta widżetu Disclosure (Rozwijanie).<summary>
CSS
details {
border: 1px solid #aaa;
border-radius: 4px;
padding: 0.5em 0.5em 0;
}
summary {
font-weight: bold;
margin: -0.5em -0.5em 0;
padding: 0.5em;
}
details[open] {
padding: 0.5em;
}
HTML
<details>
<summary>Opis zawartość</summary>
Coś wystarczająco małego, by umknąć przypadkowej uwadze.
</details>