DETAILS a SUMMARY: zapomenuté HTML 5 elementy

Ve specifikaci HTML 5 se najde řada užitečných elementů, které nejsou příliš známé a weboví programátoři je nevyužívají nebo nevyužívají dostatečně a zbytečně pak používají složité CSS konstrukce nebo JavaScript. Před časem jsem psal o elementu DATALIST, který umožňuje nativní autocomplete. Nyní přišla řada na element DETAILS a jeho druha SUMMARY.

HTML

Tyto dva elementy slouží k zobrazení stručného obsahu (summary), po kliknutí na který se zobrazí obsah rozsáhlejší (zbytek elementu details). Konstrukce připomíná elementy fieldset a legend:

<details>
    <summary>Lorem Ipsum</summary>
    Lorem ipsum dolor sit amet...
</details>

Element details může mít atribut open (bez hodnoty nebo v XHTML syntaxi zapsaný jako <details open="open">), který říká, že při prvním zobrazení má být obsah rozbalen.

Tato konstrukce může být použita libovolně, ale je předurčena pro rozbalovací seznamy. Tomu napovídá i to, že ve výchozím nastavení se před obsahem summary zobrazí trojúhelníková šipka. Doprava (▸), pokud je obsah skrytý a dolů (▾), je-li zobrazen.

Prohlédněte si základní použití této konstrukce:

CSS

Rozhodně doporučuji prvku summary přidat kurzor typu odkaz, protože jinak uživatel netuší, že má smysl na něj klikat:

summary {
    cursor: pointer;
}

Dále pak je možné standardním způsobem stylovat oba prvky. Pomocí selektoru open pak lze nastavit styl pro otevřený stav:

details[open] summary {
    color: red;
}

Pokud chcete ovlivnit, jak bude vypadat šipka v rozbaleném či sbaleném stavu, lze použít standardní prvky pro seznamy, tj. zejména list-style-type.

Prohlédněte si obsáhlejší demo, které nabízí pokročilejší customizaci: