02.04 Boxy – Rozklikávací boxy
Zdrojové CSS: /src/css/molecules/box/_accordion.scss
Zdrojové JS: /src/js/components/accordion.coffee
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
<div class="box-accordion">
<div class="box-accordion__item">
<h2 class="box-accordion__title">
<a href="#" class="box-accordion__title__link">
<span class="box-accordion__title__name">Kdy a jak dodávám maturitní vysvědčení?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
<div class="box-accordion__item is-open">
<h2 class="box-accordion__title">
<a href="#" class="box-accordion__title__link">
<span class="box-accordion__title__name">Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
</div>Kdy a jak dodávám maturitní vysvědčení?
Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.
Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?
Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.
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.
<div class="box-accordion is-simple">
<div class="box-accordion__item">
<h2 class="box-accordion__title">
<a href="#" class="box-accordion__title__link">
<span class="box-accordion__title__name">Kdy a jak dodávám maturitní vysvědčení?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
<div class="box-accordion__item is-open">
<h2 class="box-accordion__title">
<a href="#" class="box-accordion__title__link">
<span class="box-accordion__title__name">Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
</div>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.
Kdy a jak dodávám maturitní vysvědčení?
Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.
Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?
Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.
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
<div class="box-accordion box-accordion--secondary">
<div class="box-accordion__item">
<h2 class="box-accordion__title">
<a href="#" class="box-accordion__title__link">
<span class="box-accordion__title__name">Kdy a jak dodávám maturitní vysvědčení?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
<div class="box-accordion__item is-open">
<h2 class="box-accordion__title">
<a href="#" class="box-accordion__title__link">
<span class="box-accordion__title__name">Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
</div>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
Kdy a jak dodávám maturitní vysvědčení?
Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.
Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?
Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.
Molekula vycházející z defaultní molekuly s modifikátorem box-accordion--bordered na elementu .box-accordion
<div class="box-accordion box-accordion--bordered">
<div class="box-accordion__item">
<h2 class="box-accordion__title">
<a href="#" class="box-accordion__title__link">
<span class="box-accordion__title__name">Kdy a jak dodávám maturitní vysvědčení?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
<div class="box-accordion__item">
<h2 class="box-accordion__title">
<a href="#" class="box-accordion__title__link">
<span class="box-accordion__title__name">Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
</div>Molekula vycházející z defaultní molekuly s modifikátorem box-accordion--bordered na elementu .box-accordion
Kdy a jak dodávám maturitní vysvědčení?
Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.
Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?
Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.
Molekula vycházející z defaultní molekuly s modifikátorem box-accordion--bordered a box-accordion--white na elementu .box-accordion
<div class="box-accordion box-accordion--bordered box-accordion--white">
<div class="box-accordion__item">
<h2 class="box-accordion__title">
<a href="#" class="box-accordion__title__link">
<span class="box-accordion__title__name">Kdy a jak dodávám maturitní vysvědčení?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
<div class="box-accordion__item">
<h2 class="box-accordion__title">
<a href="#" class="box-accordion__title__link">
<span class="box-accordion__title__name">Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
</div>Molekula vycházející z defaultní molekuly s modifikátorem box-accordion--bordered a box-accordion--white na elementu .box-accordion
Kdy a jak dodávám maturitní vysvědčení?
Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.
Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?
Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.
Molekula vycházející z defaultní molekuly s modifikátorem box-accordion--big na elementu .box-accordion
<div class="box-accordion box-accordion--big">
<div class="box-accordion__item">
<h2 class="box-accordion__title">
<a href="#" class="box-accordion__title__link">
<span class="box-accordion__title__name">Kdy a jak dodávám maturitní vysvědčení?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
<div class="box-accordion__item">
<h2 class="box-accordion__title">
<a href="#" class="box-accordion__title__link">
<span class="box-accordion__title__name">Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
</div>Molekula vycházející z defaultní molekuly s modifikátorem box-accordion--big na elementu .box-accordion
Kdy a jak dodávám maturitní vysvědčení?
Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.
Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?
Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.
Molekula vycházející z velké molekuly s modifikátorem box-accordion--bordered na elementu .box-accordion.box-accordion--big
<div class="box-accordion box-accordion--big box-accordion--bordered">
<div class="box-accordion__item">
<h2 class="box-accordion__title">
<a href="#" class="box-accordion__title__link">
<span class="box-accordion__title__name">Kdy a jak dodávám maturitní vysvědčení?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
<div class="box-accordion__item">
<h2 class="box-accordion__title">
<a href="#" class="box-accordion__title__link">
<span class="box-accordion__title__name">Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
</div>Molekula vycházející z velké molekuly s modifikátorem box-accordion--bordered na elementu .box-accordion.box-accordion--big
Kdy a jak dodávám maturitní vysvědčení?
Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.
Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?
Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.
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.
<div class="box-accordion with-history">
<div class="box-accordion__item">
<h2 class="box-accordion__title">
<a href="#zalozka-1" class="box-accordion__title__link">
<span class="box-accordion__title__name">Kdy a jak dodávám maturitní vysvědčení?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div id="zalozka-1" class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
<div class="box-accordion__item">
<h2 class="box-accordion__title">
<a href="/test/full/path#zalozka-2" class="box-accordion__title__link">
<span class="box-accordion__title__name">Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div id="zalozka-2" class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
</div>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.
Kdy a jak dodávám maturitní vysvědčení?
Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.
Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?
Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.
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.
<div class="box-accordion">
<div class="box-accordion__item">
<h2 class="box-accordion__title">
<a href="#" class="box-accordion__title__link">
<span class="box-accordion__title__name">Kdy a jak dodávám maturitní vysvědčení?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
<div class="box-accordion__item">
<h2 class="box-accordion__title">
<a href="#" class="box-accordion__title__link">
<span class="box-accordion__title__name">Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div class="box-accordion__box">
<div class="box-accordion__inner">
<div class="box-accordion">
<div class="box-accordion__item">
<h2 class="box-accordion__title">
<a href="#" class="box-accordion__title__link">
<span class="box-accordion__title__name">Kdy a jak dodávám maturitní vysvědčení?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
<div class="box-accordion__item">
<h2 class="box-accordion__title">
<a href="#" class="box-accordion__title__link">
<span class="box-accordion__title__name">Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>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.
Kdy a jak dodávám maturitní vysvědčení?
Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.
Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?
Kdy a jak dodávám maturitní vysvědčení?
Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.
Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?
Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.
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.
<div class="box-bg box-bg--grey-dark">
<div class="box-accordion">
<div class="box-accordion__item">
<h2 class="box-accordion__title">
<a href="#" class="box-accordion__title__link">
<span class="box-accordion__title__name">Kdy a jak dodávám maturitní vysvědčení?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
<div class="box-accordion__item is-open">
<h2 class="box-accordion__title">
<a href="#" class="box-accordion__title__link">
<span class="box-accordion__title__name">Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
</div>
</div>
<div class="box-bg box-bg--primary white">
<div class="box-accordion">
<div class="box-accordion__item">
<h2 class="box-accordion__title">
<a href="#" class="box-accordion__title__link">
<span class="box-accordion__title__name">Kdy a jak dodávám maturitní vysvědčení?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
<div class="box-accordion__item is-open">
<h2 class="box-accordion__title">
<a href="#" class="box-accordion__title__link">
<span class="box-accordion__title__name">Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
</div>
</div>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.
Kdy a jak dodávám maturitní vysvědčení?
Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.
Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?
Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.
Kdy a jak dodávám maturitní vysvědčení?
Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.
Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?
Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.
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.
<p>
<a href="#" class="btn btn-primary btn-s" id="ajax-insert">
<span>Vložit</span>
</a>
</p>
<p>Pokud do URL přidáte #box-2, automaticky se po přidání rozbalí druhý box.</p>
<div id="ajax-test"></div>
<script>
const accordionHtml = `<div class="box-accordion box-accordion--big box-accordion--bordered">
<div class="box-accordion__item">
<h2 class="box-accordion__title">
<a href="#box-1" class="box-accordion__title__link">
<span class="box-accordion__title__name">Kdy a jak dodávám maturitní vysvědčení?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div id="box-1" class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
<div class="box-accordion__item">
<h2 class="box-accordion__title">
<a href="#box-2" class="box-accordion__title__link">
<span class="box-accordion__title__name">Zapomněl(a) jsem heslo k e-přihlášce, co mám dělat?</span>
<span class="icon icon icon-angle-down"></span>
</a>
</h2>
<div id="box-2" class="box-accordion__box">
<div class="box-accordion__inner">
<p>Kombinovaná (nebo taky distanční) forma studia nevyžaduje každodenní přítomnost ve škole. Výuka většinou probíhá v pátek a v sobotu v blocích. Tuto formu studia snadno skloubíš s prací, ale nebudeš mít nárok na studentské výhody, které jsou jen pro studnety denního studia.</p>
</div>
</div>
</div>
</div>`;
const button = document.getElementById('ajax-insert');
button.onclick = (e) => {
$('#ajax-test').append(accordionHtml);
$('#ajax-test').trigger('ajax-init');
button.remove();
e.preventDefault();
return false;
};
</script>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.
Pokud do URL přidáte #box-2, automaticky se po přidání rozbalí druhý box.
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