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ů.
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
Související články
Jak vkládat 3D objekty na web pomocí Three.js
Které formáty použít, jak vytvářet modely pomocí AI a kdy raději použít obrázek nebo video.
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.
Sleep v JavaScriptu
Jak implementovat sleep/delay funkcionalitu v JavaScriptu pomocí Promise a async/await