O webu
Rozbalování a sbalování obahu v CSS

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í.

Živá ukázka

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.