Chytrá komponenta
Accordion
Časté dotazy, které se rozbalí po kliknutí. Otevřená je vždy jen jedna odpověď a stránka zůstane přehledná.
Bez jediného řádku JavaScriptu. V náhledu vidíte desktop, začneme ale na telefonu.
Zápis
Otázka a schovaná odpověď
Element details obalí obsah, který jde rozbalit. První prvek uvnitř, summary, je to, na co se kliká. Všechno ostatní je schované, dokud ho neotevřete.
Klepněte v náhledu na otázku. Funguje to bez CSS i bez JavaScriptu a umí to i klávesnice.
Zápis
Seznam otázek
Každá otázka je samostatný details. Celou sekci uvedeme nadpisem a otázky zabalíme do wrapperu .questions.
Atributy
Otevřená na začátku, otevřená jen jedna
open otázku rozbalí hned po načtení. Když dostanou všechny otázky stejné name, chovají se jako skupina: otevřením jedné se ostatní zavřou.
Zkuste v náhledu otevřít jinou otázku. Ta první se sama zavře. Tomu se říká accordion.
Styl
Otázky oddělené čarou
Každá otázka dostane spodní čáru. Otázka v summary je tučně a kurzor nad ní ukáže ruku, aby bylo jasné, že se na ni dá kliknout.
Styl
Plus, které se otočí na křížek
Výchozí trojúhelníček vypneme a vpravo přidáme vlastní +. U otevřené otázky ho otočíme o 45 stupňů a z plusu je křížek.
details[open] je atributový selektor: zasáhne jen otevřené otázky. Prohlížeč atribut open přidává a odebírá sám.
Vychytávka
Plynulé otevírání
Odpověď zatím vyskočí najednou. Novější CSS umí rozbalovaný obsah (::details-content) plynule natáhnout z nulové výšky na auto.
Zatím to umí jen některé prohlížeče. Ostatní tahle pravidla přeskočí a otázka se v nich otevře hned jako dřív, nic se nerozbije.
Automatika
Na desktopu nadpis vedle otázek
Na široké obrazovce by se otázky táhly přes celou šířku. Od 700 pixelů výš dáme nadpis do levého sloupce a otázky do pravého.
Postupujeme od mobilu: základní styl je pro telefon a min-width přidává layout pro větší obrazovky.
Recept
Accordion v kostce
details+summary: rozbalování bez JavaScriptu- stejné
name: otevřená vždy jen jedna details[open]styluje otevřený stav- nové vlastnosti přidávejte tak, aby bez nich nic nechybělo