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/roz­balovacími komponentami Collapse a jejich variantou Accordion.

Komponenta Collapse v Bootstrapu

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 Bootstrap - List groups. Bootstrap pro tyto účely poskytuje ještě univerzálnější komponentu, takzvaný Collapse (možný český překlad je "zhroucení", budeme se však raději držet původního označení).

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říklad na tlačítko nebo odkaz. Často se tato funkčnost používá také na takzvané spoilery, kde skrytí obsahu řeší problém vyzrazení odpovědi na hádanku, řešení příkladu nebo se jedná například 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-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>

Nezapomeňme si do stránky nalinkovat Bootstrap JavaScript. Výsledek v prohlížeči vypadá takto:

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 se mohl element skrýt nebo zobrazit. Tlačítkům/odkazům přiřazujeme data atribut data-bs-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-bs-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 karta z lekce Bootstrap - Karty, 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říklad zobrazení smluvních podmínek nebo zákonů, případně sekcí FAQ a podobně. K tomuto efektu můžeme využít dva způsoby a to použití klasických karet nebo přímo třídy .accordion. Například, karty jsou vhodné pro nezávislý obsah, zatímco accordion je lepší pro situace, kdy chceme mít více souvisejících sekcí, které mohou být zobrazeny nebo skryty nezávisle na sobě. Začneme s kartami.

Rozbalování/sba­lování za pomoci karet

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" 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ýsledek:

Kód asi není nutné příliš popisovat, jelikož se jedná o karty, které jsme si v kurzu již podrobně vysvětlili v lekci Bootstrap - Karty. 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. Díky jeho flexibilitě můžeme využít jakékoli prvky a přizpůsobit je podle svých potřeb, aniž bychom museli používat speciální data atribut data-children divu s harmonikou jako v dřívějších lekcích. Do atributu umístíme selektor na položky pro definování vztahů mezi prvky. Důležité je ujistit se, že struktura a třídy odpovídají požadavkům Bootstrapu pro správnou funkci accordion:

Pro podporu hlasových čteček si vždy ověříme 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.

Rozbalování/sba­lování za pomoci tříd .accordion-

Accordion je zvláštní typ komponenty, která je navržena pro zobrazení skrytého obsahu. Každý prvek accordionu (označovaný jako accordion-item) obsahuje hlavičku (accordion-header), která funguje jako interaktivní prvek pro rozbalení nebo sbalení přidruženého obsahu (accordion-collapse). Tento typ komponenty je ideální pro situace, kdy potřebujeme uživatelům poskytnout přístup k více souvisejícím informacím v kompaktním formátu, například pro FAQ sekce nebo pro zobrazení různých sekcí obsahu, které uživatel může dle potřeby rozbalovat:

<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

Když potřebujeme reagovat na komponentu Collapse v JavaScriptu můžeme provést manuální inicializaci na místo inicializaci pomocí data atributů takto:

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

Tento kód projde všechny elementy s třídou .collapse ve stránce a inicializuje na nich Bootstrap Collapse komponentu. Tento přístup umožňuje lepší kontrolu nad komponentami a jejich chováním v aplikaci.

Vlastnosti

Pro tlačítka jsme používali data atribut data-bs-toggle. V JavaScriptu můžeme použít stejnojmenné vlastnosti bez prefixu data-bs-, tedy vlastnosti toggle, která otevírá/zavírá daný element. Výchozí hodnota je true.

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:

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

Tento kód najde element s ID myCollapsible a inicializuje na něm Collapse komponentu Bootstrapu s nastavením toggle na false. To znamená, že komponenta nebude automaticky přepnuta (rozbalena nebo sbalena) při inicializaci. Díky tomu máme plnou kontrolu nad chováním Collapse komponenty.

Na instanci carouselu bsCollapse pak můžeme z JavaScriptu volat metody:

• 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,
• getInstance() - umožňuje získat instanci sbalení přidruženou k prvku DOM,
• getOrCreateInstance() - vrátí instanci sbalení přidruženou k prvku DOM nebo vytvoří novou v případě, že nebyla inicializována.

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říklad takto:

document.getElementById('collapsible-polozka')
collapsible-polozka.addEventListener('hidden.bs.collapse', function () {
    // nějaká reakce...
});

V příští lekci, Bootstrap - Dropdowns, se budeme zabývat rozbalovacími tlačítky Dropdowns.