Preskočiť na hlavný obsah
IDSK 3

Akordeón

Akordeón sa používa na zobrazovanie väčšieho množstva obsahu v obmedzenom priestore, ktorý je rozdelený do logických častí (sekcií). Používateľ si môže rozbaliť len tie sekcie, ktoré ho zaujímajú. Umožňuje tak udržať stránku prehľadnú a zabrániť zahlteniu informáciami.

Použitie Akordeónu

Nadpis príslušnej lišty by mal byť v primeranej dĺžke, maximálne v 1 riadku a výstižne popisovať to, čo sa v danom akordeóne nachádza. Detailnejšie informácie o tom, čo je umiestnené v akordeóne, dodefinujte v popise pod nadpisom. Akordeón najlepšie funguje pre jednoduché texty a odkazy. Nepoužívajte akordeón na obsah, ktorý je dôležitý pre všetkých používateľov. Akordeón sa typicky používa na:

  • zoskupenie sekcií s podrobnými informáciami, ktoré nie sú dôležité pre každého používateľa,
  • zobrazovanie FAQ (často kladených otázok),
  • zobrazenie podrobností k jednotlivým témam (napr. právne texty, technické detaily, vysvetlenia),
  • návody a sprievodcovia aktivitou.

Správanie komponentu

Akordeón sa skladá z dvoch častí:

  1. Z hlavičky, ktorá obsahuje nadpis a ikonku (^/v) a je klikateľná po celej dĺžke riadku. Práve do tejto časti môžete umiestniť aj popisný text (ak je potrebný).
  2. Z obsahovej časti, ktorá sa otvorí práve po kliknutí na hlavičku, a obsahuje dlhší textový popis, prípadne odpoveď na otázku v nadpise.

Každá sekcia sa kliknutím na celú plochu hlavičky sekcie rozbalí resp. zbalí, pričom sa zmení ikona – indikátor (ro)zbalenia. Po kliknutí sa (ro)zbalí príslušný panel s obsahom sekcie. Rozbalenie ďalšej sekcie nemá vplyv na uzavretie iného, už otvoreného obsahu. Naraz môže byť otvorených viacero sekcií, používateľ si kliknutím sám určí, ktorú sekciu chce zbaliť alebo rozbaliť.

Ako sa používa

  • Použva sa keď máte viacero súvisiacich sekcií (min. 2, max 10).
  • Použva sa keď obsah v jednotlivých sekciách je rovnocenný a nezávislý.
  • Použva sa keď potrebujete rozdeliť obsah do logických sekcií (napr. FAQ, návody, inštrukcie).
  • Použva sa keď máte obsah, ktorý sa pravidelne opakuje alebo je známy.

Ako sa nepoužíva

  • Nepoužíva sa keď je potrebné vidieť všetky informácie naraz (napr. pri porovnávaní údajov).
  • Nepoužíva sa keď ide o kľúčový obsah, ktorý by nemal byť skrytý (napr. textové pole s povinnými údajmi).
  • Nepoužíva sa keď sekcie obsahujú veľa textu, vnorené interaktívne prvky alebo akčné prvky.
  • Nepoužíva sa keď ide o navigáciu medzi sekciami – použite taby alebo obsahovú navigáciu.