02.04 Boxy – Rozklikávací boxy

Výchozí molekula pro rozklikávací boxy. Do .box-accordion__inner lze vkládat jakýkoliv obsah (např. typografie, grid, molekuly boxů, molekuly výpisů, formuláře apod.).

Pro zobrazení položek slouží javascript, který se naváže na .box-accordion__title__link – tomuto odkazu ponechte href="#". Najednou nelze rozkliknout více položek. Pokud chceme některý z boxů mít otevřený při načtení stránky, pak se musí přidat na .box-accordion__item modifikátor is-open

Molekula vycházející z defaultní molekuly a může se kombinovat se vzhledem viz výše. Navíc je na .box-accordion přídán modifikátor simple, který zajistí to, že se může rozklikávat více záložek najednou.

Molekula vycházející z defaultní molekuly s modifikátorem box-accordion--secondary na elementu .box-accordion

Pro zobrazení položek slouží javascript, který se naváže na .box-accordion__title__link – tomuto odkazu ponechte href="#". Najednou lze rozkliknout více položek. Pokud chceme některý z boxů mít otevřený při načtení stránky, pak se musí přidat na .box-accordion__item modifikátor is-open

Molekula vycházející z defaultní molekuly s modifikátorem box-accordion--bordered na elementu .box-accordion

Molekula vycházející z defaultní molekuly s modifikátorem box-accordion--bordered a box-accordion--white na elementu .box-accordion

Molekula vycházející z defaultní molekuly s modifikátorem box-accordion--big na elementu .box-accordion

Molekula vycházející z velké molekuly s modifikátorem box-accordion--bordered na elementu .box-accordion.box-accordion--big

Molekula vycházející z defaultní molekuly a může se kombinovat se vzhledem viz výše. Navíc je na .box-accordion přídán modifikátor with-history, který naváže události hashchange. Navíc je potřeba přidat ID na .box-accordion__box.

Rozklikávací boxy s historií mohou být pouze jednou na stránce.

Molekula vycházející z defaultní molekuly a může se kombinovat se vzhledem viz výše. Navíc je na .box-accordion přídán modifikátor with-history, který naváže události hashchange. Navíc je potřeba přidat ID na .box-accordion__box.

V případě tmavě šedého pozadí je výchozí barva linek stejná jako barva pozadí, box si linky přebarví.

U tmavého pozadí je potřeba na box přidat třídu .white.

Pokud je accordion vložen pomocí JS dodatečně, je potřeba po jeho vložení zavolat metodu trigger('ajax-init') na jQuery objektu s vloženým obsahem. To zajistí, že pokud je v URL hash s některým z vložených boxů, tento se aktivuje.