Předvánoční slevová akce PHP týden
Pouze tento týden sleva až 80 % na PHP e-learning!
Využij předvánočních slev a získej od nás 20 % bodů zdarma! Více zde

Lekce 15 - Bootstrap - Collapse a Accordion

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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:

Collapse v Bootstrap
collapse.html

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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost 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:

Collapse v Bootstrap
collapse_harmo­nika.html

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:

Collapse v Bootstrap
collapse_harmo­nika_vlastni.html

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.


 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
4 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Předchozí článek
Bootstrap - Carousely a Progress
Všechny články v sekci
Kompletní kurz CSS frameworku Bootstrap
Miniatura
Následující článek
Bootstrap - Dropdowns
Aktivity (3)

 

 

Komentáře

Avatar
MilanS
Člen
Avatar
MilanS:1.2.2018 7:33

Ahoj, jak lze docílit toho, aby v accorodionu obsah na rozbalené kartě zabíral jen např. 5 řádků a pak roloval. U prostého textu to jde (asi to je čuňárna) vložit text do text arrea s raw="5". Bohužel takto tam ale nelze vložit formátovaný obsah (seznamy, tabulky, obrázky...) Díky moc.

 
Odpovědět
1.2.2018 7:33
Avatar
T-fon
Člen
Avatar
Odpovídá na MilanS
T-fon:23.2.2018 10:46

Ahoj, nevím jestli je to nejlepší řešení, ale já to dělal tak, že jsem zadal divu s textem pevnou výšku, kterou jsem si spočítal 5(řádků) x line-height (+případný padding).

 
Odpovědět
23.2.2018 10:46
Avatar
Petr Čech
Redaktor
Avatar
Odpovídá na MilanS
Petr Čech:23.2.2018 10:57

Nic lepšího než pevnou výšku asi nevymyslíš, ale i to se dá udělat kultivovaně - můžeš třeba udělat něco jako

calc(5em + padding, margin...)

No, a potom jednoduše overflow-y: auto

Odpovědět
23.2.2018 10:57
the cake is a lie
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jan Jurníček:11. března 18:26

Ahoj, mám problémy s dynamicky naplňovaným collapse panelem. V ASP.NET web forms jsem vytvořil generický handler ashx, v response který vrací text/html. Obsah jsem umístil do jmenného kontejneru, takže jsou dynamicky přidělována klientská id.

Tohle všechno mi krásně funguje, ale co nefunguje, je toto: Součástí toho html obsahu je taky collapse. Tedy struktura, jako v ukázce Collapse. Zkontroloval jsem třídy a hlavně reference, tedy - že href odkazuje na link. Vše souhlasí, ale nefunguje.

Hledal jsem na Internetu, píše se tam něco o bindingu položek, který vyžaduje jQuery, našel jsem tohle:

https://stackoverflow.com/…-click-event

Ale nic nepomohlo.

Opatřím-li ovládací prvek (link) , který má přepínat collapse, atributem onclick následovně:

onclick="$(this­.getAttribute('href'))­.addClass('show');"

Tak to funguje na rychlý dvojklik, přičemž po prvním kliku dostane collapse navíc třídu collapsing. Pokud druhý klik stihnu, dokud má collapse třídu collapsing, vnutím mu třídu show. Jinak ne.

Má někdo myšlenku, co s tím?

 
Odpovědět
11. března 18:26
Avatar
Jan Jurníček:11. března 19:25

Napadlo mě, co asi dělám špatně: Ten binding musím provést na stránce, kam dynamicky vytvořený HTML kód umístím po jeho umístění na tuto stránku. Všechny pokusy jsem dělal uvnitř ashx handleru na stránce, která měla sloužit pouze k vytvoření html kódu (jeho realizaci do řetězce, který se zapíše response.

Je zajímavé, že když jsem collapse panel na začátku opatřil třídou show, tedy class="collapse show", tak sbalování i rozbalování fungovalo. Co nefungovalo, bylo přepínání arial-expanded true/false linku a taky je problém v tom, že na začátku chci mít ty collapse panely sbalené.

Zítra s tím budu dělat pokusy tak, že spustím javascript (pro binding) na klientovi ashx handleru po natažení, ne uvnitř ashx handleru na stránce, kterou vyhazuji a mám ji jen kvůli tomu, aby proběhl životní cyklus stránky a naplnila se data, která ve formátu html odešlu klientovi.

 
Odpovědět
11. března 19:25
Avatar
Odpovídá na Jan Jurníček
Jan Jurníček:12. března 11:21

Ahoj, tak už jsem přišel na to, v čem byl problém: Šlo totiž o to, že ten dynamicky naplňovaný HTML obsah byl plněn z dceřinné tabulky. A šlo mi o to, aby se plnil a zobrazoval až na vyžádání uživatele. Čili na stránce je collapse rozbalované tlačítkem a jeho obsahem je seznam dceřinných záznamů. Dceřinné záznamy se natáhnou dynamicky technikou AJAX (voláním, jQury.ajax(), případně jQuery.load()) z ashx handleru až v okamžiku, kdy je chce uživatel zobrazit, čili když chce rozbalit collapse.

No, a problém tedy byl v tom, že jsem to natažení napsal jako ošetření události "show.bs.collapse". Ošetření události nebylo dokončeno a uvnitř byly realizovány další collapse panely. Což vedlo k rekurzivnímu volání toho natažení.

Když jsem to natažení přepsal jako ošetření události click tlačítka, které rozbaluje to collapse, tak vče funguje a nemusím ani nic explicitně vázat. Po click testuju, jestli má collapse třídu show a když ne (je sbaleno), tak natáhnu data. Teprve pak se rozbalí. Kdzž collapse má třídu show, tak nedělám nic, protože se collapse sbalí a nic nebude vidět.

 
Odpovědět
12. března 11:21
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 6 zpráv z 6.