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 dnešnom tutoriáli CSS frameworku Bootstrap sa budeme zaoberať zbaľovacími/roz­baľovacími komponentmi Collapse a ich variantom Accordion.

Komponent Collapse v Bootstrape

Aby sme docielili kvalitný užívateľský zážitok, 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 danej chvíli zaujímať. Na tento účel sa často používajú záložky, ktoré sme si už ukazovali v lekcii Bootstrap - List groups. Bootstrap na tieto účely poskytuje ešte univerzálnejší komponent, takzvaný Collapse (možný český preklad je "zrútenie", budeme sa však radšej držať pôvodného označenia).

Typicky Collapse použijeme na zobrazenie nejakej informácie, ktorá vo väčšine prípadov zaberá na stránke miesto, ale niektorým používateľom chceme predsa len ponechať možnosť ju zobraziť. Zobrazenie tejto informácie môžeme napojiť napríklad na tlačidlo alebo odkaz. Často sa táto funkčnosť používa aj na takzvané spojlery, kde skrytie obsahu rieši problém vyzradenia odpovede na hádanku, riešenie príkladu alebo sa jedná napríklad o časť recenzie knihy, ktorá vyzrá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á použí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-bs-toggle="collapse" href="#ukazka-collapse" role="button" aria-expanded="false" aria-controls="ukazka-collapse">
        Více informací
    </a>
    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-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>

Nezabudnime si do stránky nalinkovať Bootstrap JavaScript. Výsledok v prehliadači vyzerá takto:

Ako je u javascriptových Bootstrap komponentov zvykom, aj tu priraďujeme elementu s triedou .collapse jedinečné id. To následne používame v selektore pri tlačidlách, aby sa mohol element skryť alebo zobraziť. Tlačidlám/odkazom priraďujeme dáta atribút data-bs-toggle s hodnotou collapse. Selektor uvádzame v závislosti od použitého elementu buď do atribútu href alebo do dátumu atribútu data-bs-target. Selektor môže byť aj na triedu a tak môže odkrývať/skrývať viac elementov ako iba 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á karta z lekcie Bootstrap - Karty, 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 dokumentoch, 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é použitie je napríklad zobrazenie zmluvných podmienok alebo zákonov, prípadne sekcií FAQ a podobne. K tomuto efektu môžeme využiť dva spôsoby a to použitie klasických kariet alebo priamo triedy .accordion. Napríklad, karty sú vhodné pre nezávislý obsah, zatiaľ čo accordion je lepší pre situácie, keď chceme mať viac súvisiacich sekcií, ktoré môžu byť zobrazené alebo skryté nezávisle na sebe. Začneme s kartami.

Rozbaľovanie/zbaľo­vanie za pomoci kariet

Využijeme niekoľko kariet, na ktorých hlavičky napojíme Collapse, ktoré tvoria telá týchto kariet:

<h1>Živnostenský zákon</h1>
        <div id="harmonika" class="accordion" role="tablist">
            <div class="card">
                <div class="card-header" role="tab" id="hlavicka-1">
                    <h5 class="mb-0">
                        <a class="collapsed" data-bs-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-bs-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 data-bs-toggle="collapse" href="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
                            Část druhá - Druhy živností
                        </a>
                    </h5>
                </div>
                <div id="collapse-2" class="collapse" role="tabpanel" aria-labelledby="hlavicka-2" data-bs-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 data-bs-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-bs-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:

Kód asi nie je nutné príliš popisovať, pretože sa jedná o karty, ktoré sme si v kurze už podrobne vysvetlili v lekcii Bootstrap - Karty. Hlavičky kariet sme napojili pomocou unikátnych id so selektormi na ich telá. 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í ísť o karty. Vďaka jeho flexibilite môžeme využiť akékoľvek prvky a prispôsobiť ich podľa svojich potrieb bez toho, aby sme museli používať špeciálne dáta atribút data-children divu s harmonikou ako v skorších lekciách. Do atribútu umiestnime selektor na položky na definovanie vzťahov medzi prvkami. Dôležité je uistiť sa, že štruktúra a triedy zodpovedajú požiadavkám Bootstrapu pre správnu funkciu accordion:

Na podporu hlasových čítačiek si vždy overíme správne priradenie "aria" atribútov, aby čítačka dokázala čítať len rozbalené elementy a ponúkať podporu rozbaľovania tých zabalených.

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

Rozbaľovanie/zbaľo­vanie pomocou tried .accordion-

Accordion je zvláštny typ komponentu, ktorý je navrhnutý na zobrazenie skrytého obsahu. Každý prvok accordionu (označovaný ako accordion-item) obsahuje hlavičku (accordion-header), ktorá funguje ako interaktívny prvok pre rozbalenie alebo zbalenie pridruženého obsahu (accordion-collapse). Tento typ komponentu je ideálny pre situácie, kedy potrebujeme používateľom poskytnúť prístup k viacerým súvisiacim informáciám v kompaktnom formáte, napríklad pre FAQ sekcie alebo pre zobrazenie rôznych sekcií obsahu, ktoré používateľ môže podľa potreby rozbaľovať:

<div class="accordion" id="accordionPriklad">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        První položka
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionPriklad">
      <div class="accordion-body">
        Text první...
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Druhá položka
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionPriklad">
      <div class="accordion-body">
        Text druhý...
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
    Třetí položka
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionPriklad">
      <div class="accordion-body">
        Text třetí...
      </div>
    </div>
  </div>
</div>

JavaScript

Keď potrebujeme reagovať na komponentu Collapse v JavaScripte môžeme vykonať manuálnu inicializáciu na miesto inicializáciu pomocou dátumu atribútov takto:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'));
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl);
});

Tento kód prejde všetky elementy s triedou .collapse v stránke a inicializuje na nich komponent Bootstrap Collapse. Tento prístup umožňuje lepšiu kontrolu nad komponentmi a ich správaním v aplikácii.

Vlastnosti

Pre tlačidlá sme používali údaje atribút data-bs-toggle. V JavaScripte môžeme použiť rovnomenné vlastnosti bez prefixu data-bs-, teda vlastnosti toggle, ktorá otvára/zatvára daný element. Predvolená hodnota je true.

Metódy

Metódy aj pri tomto komponente sa volajú asynchrónne a počas animácie sú ďalšie volania ignorované. Riadenie je odovzdané tesne po spustení animácie, ale pred jej dokončením.

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

var myCollapsible = document.getElementById('myCollapsible');
var bsCollapse = new bootstrap.Collapse(myCollapsible, {
  toggle: false
});

Tento kód nájde element s ID myCollapsible a inicializuje na ňom Collapse komponent Bootstrapu s nastavením toggle na false. To znamená, že komponent nebude automaticky prepnutý (rozbalený alebo zbalený) pri inicializácii. Vďaka tomu máme plnú kontrolu nad správaním Collapse komponenty.

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,
• "getInstance" - umožňuje získať inštanciu zbalenia pridruženú k prvku DOM,
• "getOrCreateInstance" - vráti inštanciu zbalenia pridruženú k prvku DOM alebo vytvorí novú v prípade, že nebola inicializovaná.

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ácie zobrazenie elementu,
• hide.bs.collapse - vyvolá sa ihneď po zavolaní metódy s hodnotou "hide",
• hidden.bs.collapse - vyvolá sa po dokončení animácie skrytie elementu.

Na udalosti môžeme zareagovať napríklad takto:

document.getElementById('collapsible-polozka')
collapsible-polozka.addEventListener('hidden.bs.collapse', function () {
    // nejaká reakcia...
});

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