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.
Komentáře