Skrývání a odkrývání textu
Rozbalení a sbalení obsahu po kliknutí.
Pokud je na webu hodně textu, který nemusí návštěvníka tolik zajímat, může být vhodné takový text rozbalit až na vyžádání po kliknutí na tlačítko/odkaz. Ideální postup, jak zobrazit/skrýt obsah, je JavaScriptem pouze měnit CSS třídu a vše ostatní řešit kaskádovými styly. (Obdobným způsobem lze velice snadno i měnit vzhled a podobně.)
Řešení
- Vytvoříme element,
<div class=schovat> <div>Obsah</div> </div> - pomocí CSS jeho obsah skryjeme
.schovat div {display: none} - a nyní jen stačí přes JS prohazovat třídu.
function prohodit(element, prvniTrida, druhaTrida) { element.className = element.className == prvniTrida ? druhaTrida : prvniTrida; }Co použít jako
element- Je-li přepínací tlačítko (odkaz) poblíž obsahu (co se má skrývat/odkrývat), vše obalíme do společného
<div>u, ke kterému se z tlačítka dostaneme přesthis.parentNode.<button onclick="prohodit(this.parentNode, 'schovat', 'ukazat')"> Zobrazit/Skrýt </button> - Je-li tlačítko někde jinde, přidáme
<div>u atributida použijemedocument.getElementById("id").
- Je-li přepínací tlačítko (odkaz) poblíž obsahu (co se má skrývat/odkrývat), vše obalíme do společného
Velkou výhodou změny třídy je to, že potom lze přes CSS pracovat i s přepínacím tlačítkem.
.schovat button {/* obsah je schovaný */}
.ukazat button {}Plynulé skrývání a odkrývání
Skrývání a zobrazování obsahu může být díky animaci i hezky plynulé.
Vypnutý JavaScript
V případě vypnutého JavaScriptu by v každém případě měl obsah býti vidět.
Asi nejelegantnější je nastavovat pomocí JS třídu pro nějaký hodně nadřazený element.
<body>
<script> document.body.className+=' js' </script>… a všechny skrývací akce začínat selektorem .js:
.js .schovat div {display: none}Rozklikávání/přepínání částí stránky
Obdobným principem lze docílit přepínání jednotlivých skupin na stránce. Kdy kliknutí na nadpis ostatní položky skryje a zobrazí právě tu, na kterou bylo kliknuto.
HTML
HTML kód je celkem obyčejný, jednotlivé přepínané části jsou <div>y; obsah, který se má zjevit až po rozkliknutí, je rovněž v samostatném obalu, který se při změně třídy nadřazeného <div>u zviditelní.
CSS
V CSS se využívá třídy js, kterou má <body>, tj. všechny styly, které používá JavaScript, jsou takto prefixovány.
JavaScript
JS navěsí na nadpisy (značky <h3>) funkci, která nejprve projde všechny obalové <div>y a vymaže jim případnou třídu viditelnosti. Následně se tomu právě zakliknutému třída (className) pro zobrazení přiřadí.
Možné rozšíření
Má-li nějaká část být zobrazena rovnou při načtení stránky, stačí prosté přiřazení třídy viditelnosti pro obalový element dané skupiny, tj. <div class=show>.
Díky nastavování třídy show lze podle ní velice snadno vzhledově odlišit rozkliknutou část od ostatních.
Související články
CSS @starting-style
Jak animovat elementy při jejich prvním zobrazení pomocí at-pravidla @starting-style.
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.
