Lekce 15 - Bootstrap - Collapse a Accordion
V předešlém cvičení, Řešené úlohy k 13.-14. lekci Bootstrap CSS frameworku, jsme si procvičili nabyté zkušenosti z předchozích lekcí.
V dnešním tutoriálu CSS frameworku Bootstrap se budeme zabývat sbalovacími/rozbalovacími komponentami Collapse a jeho variantou Accordion.
Collapse
Abychom docílili kvalitního uživatelského zážitku, měli bychom zobrazovat pouze relevantní informace a snažit se o co nejmenší množství viditelného obsahu, který uživatele nemusí v danou chvíli zajímat. K tomuto účelu se často používají záložky, které jsme si již ukazovali v lekci o List groups. Bootstrap pro tyto účely poskytuje ještě univerzálnější komponentu, tzv. Collapse (možný český překlad je "zhroucení", budu se však raději držet původního označení).
Ukázka
Typicky Collapse použijeme na zobrazení nějaké informace, která ve většině případů zabírá na stránce místo, ale některým uživatelům chceme přeci jen ponechat možnost ji zobrazit. Zobrazení této informace můžeme napojit např. na tlačítko nebo odkaz. Často se tato funkčnost používá také na tzv. spoilery, kde skrytí obsahu řeší problém vyzrazení odpovědi na hádanku, řešení příkladu nebo se jedná např. o část recenze knihy, která vyzrazuje zápletku.
Jelikož napojení Collapse na tlačítko a na odkaz vypadá v kódu jinak, ukažme si obě možnosti. Kód níže nechá uživatele zobrazit detailní popis platby za poštovné.
<p>Za poštovné si účtujeme 99 Kč.</p> <p> <a class="btn btn-primary" data-toggle="collapse" href="#ukazka-collapse" aria-expanded="false" aria-controls="ukazka-collapse"> Více informací </a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ukazka-collapse" aria-expanded="false" aria-controls="ukazka-collapse"> Více informací </button> </p> <div class="collapse" id="ukazka-collapse"> <div class="card card-body"> Poštovné zahrnuje dopravu Českou poštou, balné a službu upozornění naší operátorky na déle nevyzvednutou zásilku. </div> </div>
Nezapomeňte si do stránku nalinkovat Bootstrap JavaScript. Výsledek v prohlížeči:
Jak je u javascriptových Bootstrap komponent zvykem, i zde přiřazujeme
elementu se třídou .collapse
jedinečné id
. To
následně používáme v selektoru u tlačítek, aby mohla element skrýt nebo
zobrazit. Tlačítkům/odkazům přiřazujeme data atribut
data-toggle
s hodnotou collapse
. Selektor uvádíme v
závislosti na použitém elementu buď do atributu href
nebo do
data atributu data-target
. Selektor může být i na třídu a tak
může odkrývat/skrývat více elementů než jen jeden. CSS framework
Bootstrap doporučuje přidávat další atributy pro hlasové čtečky. Pro
zobrazení dalších informací je zde použita Bootstrap karta, ale samozřejmě
se zde může nalézat naprosto libovolný HTML obsah.
Třídy
JavaScript elementu automaticky přiřazuje následující třídy:
.collapse
- Obsah je skrytý.collapsing
- Obsah se skrývá nebo odkrývá (při animaci).collapse.show
- Obsah je zobrazený
Accordion
Komponenta Collapse přímo svádí k implementaci "efektu harmoniky". Ten využijeme u složitých dokumentů, kde nás typicky zajímá jen část obsahu a zobrazení celého dokumentu by bylo velmi nepřehledné. Otevření jedné části harmoniky má za následek zavření části jiné. Časté užití je např. zobrazení smluvních podmínek nebo zákonů. K tomu využijeme několika karet, na jejichž hlavičky napojíme Collapse, které tvoří těla těchto karet.
<h1>Živnostenský zákon</h1> <div id="harmonika" role="tablist"> <div class="card"> <div class="card-header" role="tab" id="hlavicka-1"> <h5 class="mb-0"> <a data-toggle="collapse" href="#collapse-1" aria-expanded="true" aria-controls="collapse-1"> Část první - Všeobecná ustanovení </a> </h5> </div> <div id="collapse-1" class="collapse show" role="tabpanel" aria-labelledby="hlavicka-1" data-parent="#harmonika"> <div class="card-body"> Tento zákon upravuje podmínky živnostenského podnikání (dále jen "živnost") a kontrolu nad jejich dodržováním. Živností je soustavná činnost provozovaná samostatně, vlastním jménem, na vlastní odpovědnost, za účelem dosažení zisku a za podmínek stanovených tímto zákonem. </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="hlavicka-2"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" href="#collapse-2" aria-expanded="false" aria-controls="collapseTwo"> Část druhá - Druhy živností </a> </h5> </div> <div id="collapse-2" class="collapse" role="tabpanel" aria-labelledby="hlavicka-2" data-parent="#harmonika"> <div class="card-body"> Ohlašovacími živnostmi jsou <ul> <li>živnosti řemeslné, je-li podmínkou provozování živnosti odborná způsobilost uvedená v § 21 a 22, <li>živnosti vázané, je-li podmínkou provozování živnosti odborná způsobilost uvedená v příloze č. 2 k tomuto zákonu, není-li dále stanoveno jinak, <li>živnost volná, u které není jako podmínka provozování živnosti odborná způsobilost stanovena. </ul> </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="hlavicka-3"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" href="#collapse-3" aria-expanded="false" aria-controls="collapse-3"> Část třetí - Rozsah živnostenského oprávnění </a> </h5> </div> <div id="collapse-3" class="collapse" role="tabpanel" aria-labelledby="hlavicka-3" data-parent="#harmonika"> <div class="card-body"> Rozsah živnostenského oprávnění (dále jen „rozsah oprávnění“) se posuzuje podle předmětu podnikání uvedeného ve výpisu s přihlédnutím k ustanovením této části. Živnostenské oprávnění k výkonu živnosti volné opravňuje k výkonu činností uvedených v příloze č. 4 k tomuto zákonu. </div> </div> </div> </div>
Výsledek:
Kód asi není nutné příliš popisovat, jelikož se jedná o karty, které
jsme si v kurzu již podrobně vysvětlili. Hlavičky karet jsme napojili
pomocí unikátních id
se selektory na jejich těla. Díky data
atributům a třídám .collapse
je vždy rozbalené jen tělo
jedné karty.
Bootstrap nám dokonce umožňuje poskládat si harmoniku i ze zcela
vlastních komponent, nemusí se jednat o karty. Je k tomu třeba přiřadit
data atribut data-children
divu s harmonikou. Do atributu
umístíme selektor na položky harmoniky. Může zde být tedy např. hodnota
.polozka
(i s tečkou). Dojde k další drobné změně struktury,
podívejte se na následující ukázku a případně i na její zdrojový
kód:
Pro podporu hlasových čteček si ověřte správné přiřazení "aria" atributů, aby čtečka dokázala číst jen rozbalené elementy a nabízet podporu rozbalování těch zabalených.
Collapse můžeme použít pro libovolné elementy, stačí je správně napojit, viz první příklad.
JavaScript
Pokud byste na Collapse potřebovali nějakým způsobem reagovat z JavaScriptu, jedná se opět o jQuery plugin s metodami a událostmi.
Manuální inicializaci na místo inicializace pomocí data atributů provedeme takto:
$('.collapse').collapse();
Vlastnosti
Pro nastavení rodiče a tlačítka jsme používali data atributy
data-parent
a data-toggle
. V JavaScriptu můžeme
použít stejnojmenných vlastností bez prefixu data-
, tedy
vlastností:
parent
- Pokud je nastaven rodičovský element, dojde k uzavření všech ostatních elementů po otevření některého z nich. Atribut nastavujeme položkám, které se mají rozbalovat/sbalovat. Výchozí hodnota jefalse
, rodiče můžeme nastavit pomocí selektoru, jQuery objektu nebo DOM elementu.toggle
- Otevírá/zavírá daný element. Výchozí hodnota jetrue
. Nastavujeme na ovládací prvky.
Metody
Metody i u této komponenty se volají asynchronně a během animace jsou další volání ignorována. Řízení je předáno těsně po spuštění animace, ale před jejím dokončením.
Collapsible elementy můžeme pomocí JavaScriptu vytvořit jako:
$('#myCollapsible').collapse({ toggle: false })
Metodu můžeme volat s parametry:
"toggle"
- Zviditelní/skryje collapsible element, předá řízení ještě než dojde k přepnutí"show"
- Zviditelní collapsible element, předá řízení ještě než dojde k přepnutí"hide"
- Skryje collapsible element, předá řízení ještě než dojde k přepnutí"dispose"
- Odstraní collapse
Události
Můžeme reagovat na následující javascriptové události:
show.bs.collapse
- Vyvolá se ihned po zavolání metody s hodnotou"show"
.shown.bs.collapse
- Vyvolá se po dokončení animace zobrazení elementu.hide.bs.collapse
- Vyvolá se ihned po zavolání metody s hodnotou"hide"
.hidden.bs.collapse
- Vyvolá se po dokončení animace skrytí elementu.
Na události můžeme zareagovat např. takto:
$('#collapsible-polozka').on('hidden.bs.collapse', function () { // nějaká reakce... });
V příští lekci, Bootstrap - Dropdowns, se budeme zabývat rozbalovacími tlačítky Dropdowns.