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.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Změna vzhledu stránky

Změna designu bez znovunačtení stránky

Jak snadno umožnit uživateli přepínat různé vzhledy stránky, tmavou/světlou variantu apod.

Skrývání a odkrývání

Skrývání a odkrývání textu

Rozbalení a sbalení obsahu po kliknutí.

CSS mapa s popisky

Body s popisky na mapě

Statická obrázková mapa s vlastními body a :hover popisky.

Zvýraznění aktivní kotvy

Zvýraznění aktivované kotvy (:target)

Pokud se v rámci stránky používají odkazy na jednotlivé #části, může být vhodné zvýrazněním ukázat, kam odkaz mířil.

Komentáře