Lekce 15 - Bootstrap - Collapse a Accordion

V minulé lekci, Bootstrap - Carousely a Progress, jsme si představili prezentační komponentu carousel a progressbary. V dnešním tutoriálu CSS frameworku Bootstrap se budeme zabývat sbalovacími/roz­balovací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

Naši partneři možná hledají právě tebe!

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/sba­lovat. Výchozí hodnota je false, rodiče můžeme nastavit pomocí selektoru, jQuery objektu nebo DOM elementu.
• toggle - Otevírá/zavírá daný element. Výchozí hodnota je true. 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.