Moderní tvorba webových aplikací

O webu

Skrývání a odkrývání s data-atributy

Zobrazování a skrývání obsahu elegantněji s využitím vlastních atributů.

2 minuty

Skrývání a odkrývání obsahu lze vytvořit pomocí JavaScriptu (a přepínání tříd) nebo i čistě v CSS (od IE 9 pomocí atributu :checked).

Další postup může být si přepínatelný obsah označit vlastními atributy a nechat JavaScript, ať se o to postará (s využitím querySelectoruIE 8 a novější – to jde poměrně jednoduše).

Použití

  • K rozklikávacímu tlačítku napíšu data-toggle-control="obsah".
  • K příslušnému obsahu data-toggle="obsah".
  • A když má být obsah rovnou otevřený, tak se k tlačítku přidá data-control-on.

A je to.

<button 
  data-toggle-control="obsah"
  data-control-on>
  Tlačítko
</button>

<div data-toggle="obsah">
  Obsah
</div>

Poznámka: skrývání obsahu by se teoreticky správně mělo provádět jen při zapnutém JS.

Odkazy jinam

Související články

Detekce otevření DevTools

Jak zjistit, že se na stránce otevřely vývojářské nástroje.

13 minut

JavaScript null a undefined

Rozdíly mezi null a undefined v JavaScriptu, kdy je používat a jak se vyhnout běžným chybám.

12 minut

Sleep v JavaScriptu

Jak implementovat sleep/delay funkcionalitu v JavaScriptu pomocí Promise a async/await

6 minut

JavaScript Battery API

Jak v JS zjistit stav baterie, co dnes funguje a kdy API nepoužívat.

3 minuty

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025