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.
Související články
Jak udělat input s automatickou šířkou podle obsahu
Několik způsobů, jak dosáhnout toho, aby se textové pole rozšiřovalo a zužovalo podle délky zadaného textu.
CSS @starting-style
Jak animovat elementy při jejich prvním zobrazení pomocí at-pravidla @starting-style.
