Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

15. diel - Bootstrap - Collapse a Accordion

V predchádzajúcom cvičení, Riešené úlohy k 13.-14. lekciu Bootstrap CSS frameworku, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

V minulej lekcii, Riešené úlohy k 13.-14. lekciu Bootstrap CSS frameworku , sme si predstavili prezentačné komponent carousel a progressbar. V dnešnom tutoriále CSS frameworku Bootstrap sa budeme zaoberať sbalovacími / rozbaľovacími komponentmi Collapse a jeho variantom Accordion.

Collapse

Aby sme docielili kvalitného používateľského zážitku, mali by sme zobrazovať iba relevantné informácie a snažiť sa o čo najmenšie množstvo viditeľného obsahu, ktorý používateľa nemusí v danú chvíľu zaujímať. Na tento účel sa často používajú záložky, ktoré sme si už ukazovali v lekcii o List groups. Bootstrap pre tieto účely poskytuje ešte univerzálnejší komponent, tzv. Collapse (možný český preklad je "zrútenie", budem sa však radšej držať pôvodného označenia).

Ukážka

Typicky Collapse použijeme na zobrazenie nejaké informácie, ktorá vo väčšine prípadov zaberá na stránke miesto, ale niektorým užívateľom chceme predsa len ponechať možnosť ju zobraziť. Zobrazení tejto informácie môžeme napojiť napr. Na tlačidlo alebo odkaz. Často sa táto funkčnosť používa aj na tzv. Spojlery, kde skrytie obsahu rieši problém vyzradenie odpovede na hádanku, riešenie príkladu alebo sa jedná napr. O časť recenzie knihy, ktorá prezrádza zápletku.

Keďže napojenie Collapse na tlačidlo a na odkaz vyzerá v kóde inak, ukážme si obe možnosti. Kód nižšie nechá užívateľa zobraziť 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>

Nezabudnite si do stránku nalinkovať Bootstrap JavaScript. Výsledok v prehliadači:

Collapse v Bootstrap
collapse.html

Ako je u javascriptových Bootstrap komponentov zvykom, aj tu priraďujeme elementu sa triedou .collapse jedinečné id. To následne používame v selektora u tlačidiel, aby mohla element skryť alebo zobraziť. Tlačidlám / odkazom priraďujeme dáta atribút data-toggle s hodnotou collapse. Selektor uvádzame v závislosti na použitom elementu buď do atribútu href alebo do dátumu atribútu data-target. Selektor môže byť aj na triedu a tak môže odkrývať / skrývať viac elementov než len jeden. CSS framework Bootstrap odporúča pridávať ďalšie atribúty pre hlasové čítačky. Pre zobrazenie ďalších informácií je tu použitá Bootstrap karta, ale samozrejme sa tu môže nachádzať úplne ľubovoľný HTML obsah.

Triedy

JavaScript elementu automaticky priraďuje nasledujúce triedy:

  • .collapse - Obsah je skrytý
  • .collapsing - Obsah sa skrýva alebo odkrýva (pri animácii)
  • .collapse.show - Obsah je zobrazený

Accordion

Komponent Collapse priamo zvádza k implementácii "efektu harmoniky". Ten využijeme pri zložitých dokumentov, kde nás typicky zaujíma len časť obsahu a zobrazenie celého dokumentu by bolo veľmi neprehľadné. Otvorenie jednej časti harmoniky má za následok zatvorenie časti inej. Časté užitie je napr. Zobrazenie zmluvných podmienok alebo zákonov. K tomu využijeme niekoľkých kariet, na ktorých hlavičky napojíme Collapse, ktoré tvoria telá týchto kariet.

<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ýsledok:

Collapse v Bootstrap
collapse_harmo­nika.html

Kód asi nie je nutné príliš popisovať, keďže ide o karty, ktoré sme si v kurze už podrobne vysvetlili. Hlavičky kariet sme napojili pomocou unikátnych id sa selektory na ich tela. Vďaka dáta atribútom a triedam .collapse je vždy rozbalené len telo jednej karty.

Bootstrap nám dokonca umožňuje poskladať si harmoniku aj z úplne vlastných komponentov, nemusí sa jednať o karty. Je k tomu treba priradiť dáta atribút data-children divu s harmonikou. Do atribútu umiestnime selektor na položky harmoniky. Môže tu byť teda napr. Hodnota .polozka (is bodkou). Dôjde k ďalšej drobnej zmene štruktúry, pozrite sa na nasledujúcu ukážku a prípadne aj na jej zdrojový kód:

Collapse v Bootstrap
collapse_harmo­nika_vlastni.html

Pre podporu hlasových čítačiek si overte správne priradenie "aria" atribútov, aby čítačka dokázala čítať len rozbalené elementy a ponúkať podporu rozbaľovaní tých zabalených.

Collapse môžeme použiť pre ľubovoľné elementy, stačí ich správne napojiť, viď prvý príklad.

Javascript

Ak by ste na Collapse potrebovali nejakým spôsobom reagovať z JavaScriptu, jedná sa opäť o jQuery plugin s metódami a udalosťami.

Manuálne inicializáciu na miesto inicializácia pomocou dáta atribútov vykonáme takto:

$('.collapse').collapse();

Vlastnosti

Pre nastavenie rodičov a tlačidlá sme používali dáta atribúty data-parent a data-toggle. V JavaScriptu môžeme použiť rovnomenných vlastností bez prefixu data-, teda vlastností:

  • parent - Ak je nastavený rodičovský element, dôjde k uzavretiu všetkých ostatných elementov po otvorení niektorého z nich. Atribút nastavujeme položkám, ktoré sa majú rozbaľovať / zbaľovať. Predvolená hodnota je false, rodičia môžeme nastaviť pomocou selektora, jQuery objektu alebo DOM elementu.
  • toggle - Otvára / zatvára daný element. Predvolená hodnota je true. Nastavujeme na ovládacie prvky.

Metódy

Metódy aj u tejto komponenty sa volajú asynchrónne a počas animácie sú ďalšie volania ignoruje. Riadenie je odovzdaný tesne po spustení animácie, ale pred jej dokončením.

Collapsible elementy môžeme pomocou JavaScriptu vytvoriť ako:

$('#myCollapsible').collapse({
  toggle: false
})

Metódu môžeme volať s parametrami:

  • "toggle" - Zviditeľní / skryje Collapsible element, odovzdá riadenie ešte než dôjde k prepnutiu
  • "show" - Zviditeľní Collapsible element, odovzdá riadenie ešte než dôjde k prepnutiu
  • "hide" - Skryje Collapsible element, odovzdá riadenie ešte než dôjde k prepnutiu
  • "dispose" - Odstráni collapse
Udalosti

Môžeme reagovať na nasledujúce javascriptové udalosti:

  • show.bs.collapse - Vyvolá sa ihneď po zavolaní metódy s hodnotou "show".
  • shown.bs.collapse - Vyvolá sa po dokončení animácia zobrazenie elementu.
  • hide.bs.collapse - Vyvolá sa ihneď po zavolaní metódy s hodnotou "hide".
  • hidden.bs.collapse - Vyvolá sa po dokončení animácia skrytie elementu.
Na udalosti môžeme zareagovať napr. Nasledovne:
$('#collapsible-polozka').on('hidden.bs.collapse', function () {
    // nějaká reakce...
});

V budúcej lekcii, Bootstrap - Dropdowns , sa budeme zaoberať rozbaľovacími tlačidlami Dropdowns.


 

Predchádzajúci článok
Riešené úlohy k 13.-14. lekciu Bootstrap CSS frameworku
Všetky články v sekcii
Kompletný kurz CSS frameworku Bootstrap
Preskočiť článok
(neodporúčame)
Bootstrap - Dropdowns
Článok pre vás napísal David Hartinger
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity