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
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.
