Rozbalování a sbalování obahu v CSS
Jak skrývat a odkrývat části stránky v čistém CSS bez jakéhokoliv JavaScriptu.
Když chceme na stránce vytvořit obsah, který nemá být ihned viditelný, existuje relativně prosté řešení skrývání a odkrývání v JavaScriptu, které díky animacím může být i plynulé (ideální je skriptem jen přepínat třídy).
Kromě toho je možné od IE 9 tuto funkci zajistit čistě v CSS.
Obsah, který se objeví po kliknutí.
Selektor :checked
Řešení využívá selektoru zaškrtnutí (proto je funkčnost limitována tímto selektorem na IE 9+), kdy se před skrývaný <div> umístí <input type=checkbox>, který v závislosti na svém zaškrtnutí požadovaný obsah skryje/zobrazí.
Totožného principu lze využít i k:
Zmíněný checkbox je potom skrytý a ovládá se značkou <label> s atributem for. Symboly plus a mínus jsou vytvořeny atributem content, nicméně může se jednat o prosté <span>y, které snadno v <label>u zaměříme:
input[type=checkbox]:checked + .rozbalovaci label > span {}Fallback pro starší IE
Záleží-li nám i na starších prohlížečích (IE 8 a starší), nezbývá než použít JS řešení nebo doplnit podporu CSS 3 selektorů v IE.
Co si myslíte o tomto článku?
Diskuse
Související články
CSS item-pack: balance – vyvážené rozložení flex položek
Vlastnost item-pack: balance rozděluje flex položky rovnoměrně mezi řádky, podobně jako text-wrap: balance vyvažuje řádky textu.
CSS Container Queries – responsivní komponenty
Jak pomocí @container, container-type a container-name vytvářet komponenty, které se přizpůsobí velikosti svého rodiče místo viewportu.
CSS Anchor Positioning – posicování elementů relativně k jiným
Jak pomocí anchor-name, position-anchor a funkce anchor() posicovat elementy relativně k jiným bez JavaScriptu.
Centrování na webových stránkách
Moderní způsoby vertikálního i horizontálního centrování v CSS. Flexbox, Grid, margin auto a další techniky.