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ý slovenský 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>We charge 5 EUR for shopping.</p>
<p>
    <a class="btn btn-primary" data-bs-toggle="collapse" href="#example-collapse" role="button" aria-expanded="false" aria-controls="example-collapse">
        More information
    </a>
    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#example-collapse" aria-expanded="false" aria-controls="example-collapse">
        More information
    </button>
</p>
<div class="collapse" id="example-collapse">
    <div class="card card-body">
        The postage includes a transportation by Fedex, packing, and notifying our operator about packages which haven't been picked up for a longer time.
    </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áta 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>Trade Licensing Act</h1>
<div id="accordion" class="accordion" role="tablist">
    <div class="card">
        <div class="card-header" role="tab" id="header-1">
            <h5 class="mb-0">
                <a class="collapsed" data-bs-toggle="collapse" href="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
                    Part One - General Provisions
                </a>
            </h5>
        </div>
        <div id="collapse-1" class="collapse show" role="tabpanel" aria-labelledby="header-1" data-bs-parent="#accordion">
            <div class="card-body">
                This Act regulates the conditions of trade business (hereinafter referred to as "trade") and the control of their compliance. A trade is a systematic activity carried out independently, under one's own name, on one's own responsibility, for the purpose of making a profit and under the conditions set forth in this Act.
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" role="tab" id="header-2">
            <h5 class="mb-0">
                <a data-bs-toggle="collapse" href="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
                    Part Two - Types of Trades
                </a>
            </h5>
        </div>
        <div id="collapse-2" class="collapse" role="tabpanel" aria-labelledby="header-2" data-bs-parent="#accordion">
            <div class="card-body">
                Notifiable trades are:
                <ul>
                    <li>Craft trades, where the condition for operating the trade is the professional competence specified in Sections 21 and 22,</li>
                    <li>Regulated trades, where the condition for operating the trade is the professional competence specified in Annex No. 2 to this Act, unless otherwise specified,</li>
                    <li>Unregulated trades, where professional competence is not a condition for operating the trade.</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" role="tab" id="header-3">
            <h5 class="mb-0">
                <a data-bs-toggle="collapse" href="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
                    Part Three - Scope of Trade Authorization
                </a>
            </h5>
        </div>
        <div id="collapse-3" class="collapse" role="tabpanel" aria-labelledby="header-3" data-bs-parent="#accordion">
            <div class="card-body">
                The scope of trade authorization (hereinafter referred to as "scope of authorization") is assessed according to the subject of business stated in the extract, taking into account the provisions of this part. The trade authorization to perform unregulated trades entitles the holder to perform the activities listed in Annex No. 4 to this Act.
            </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="accordionExample">
  <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">
        First Item
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        First text...
      </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">
        Second Item
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Second text...
      </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">
        Third Item
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Third text...
      </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áta 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.

Na inštancii bsCollapse môžeme z JavaScriptu volať metódy:

• 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-item')
collapsible-item.addEventListener('hidden.bs.collapse', function () {
    // some reaction...
});

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