Skrývání a odkrývání

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í

Text ke skrytí.
  1. Vytvoříme element,
    <div class=schovat>
    	<div>Obsah</div>
    </div>
  2. pomocí CSS jeho obsah skryjeme
    .schovat div {display: none}
  3. 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řes this.parentNode.
      <button onclick="prohodit(this.parentNode, 'schovat', 'ukazat')">
      	Zobrazit/Skrýt
      </button>
    • Je-li tlačítko někde jinde, přidáme <div>u atribut id a použijeme document.getElementById("id").

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.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Změna vzhledu stránky

Změna designu bez znovunačtení stránky

Jak snadno umožnit uživateli přepínat různé vzhledy stránky, tmavou/světlou variantu apod.

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Načtení obrázku, až když je potřeba

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

Lightboxová vstupní stránka

Lightboxová vstupní stránka ihned po načtení

Jak vytvořit lightbox okno, které po načtení stránky překryje obsah.

Komentáře