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

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 querySelectoru – IE 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>

• Živá ukázka
• Kód na GitHubu

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

Odkazy jinam

• How To Use ngShow and ngHide