<!-- CSS link (HTML header), replace with "https://style.brandenburg.de/%VERSION_ALIAS%/css/app.css" -->
<link type="text/css" rel="stylesheet" href="https://style.brandenburg.de/%VERSION_ALIAS%/css/themes/Olivgruen-394E1D.css"/>
Zur besseren Strukturierung und Ordnung von Content kann die Tab-Komponente verwendet werden. Der Inhalt ist frei wählbar. Der aktive Tab-Reiter besitzt eine Linie in Grundfarbe. Die Inhalte der einzelnen Tabs müssen zeitlich vor den Medien geladen werden. Die Tab-Komponente kann horizontal verwendet werden, aber auch vertikal. Die vertikale Anordnung bietet sich für größere Sortierungen an, bspw. das komplette Alphabet o.ä.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<section class="tabs-to-accordions-vertical">
<div class="medium-3 columns bb-vertical-tabs-column-right">
<ul class="tabs show-for-medium bb-vertical-tabs vertical contained" id="example-tabs" data-tabs>
<li class="tabs-title bb-vertical-tabs-title bb-vertical-tabs-title-first is-active panelv1">
<a title="Prignitz" href="#panelv1" aria-selected="true">Prignitz</a>
</li>
<li class="tabs-title bb-vertical-tabs-title panelv2" id="yolo">
<a title="Oder-Spree" href="#panelv2">Oder-Spree</a>
</li>
<li class="tabs-title bb-vertical-tabs-title panelv3">
<a title="Uckermark" href="#panelv3">Uckermark</a>
</li>
<li class="tabs-title bb-vertical-tabs-title panelv4">
<a title="Havelland" href="#panelv4">Havelland</a>
</li>
</ul>
</div>
<div class="medium-9 columns bb-vertical-tabs-column-left">
<ul class="accordion bb-accordion bb-accordion-vertical responsive-tabs-vertical"
data-allow-all-closed="true" data-accordion data-tabs-content="example-tabs" role="tablist">
<li class="accordion-item bb-accordion-item toggleType-vertical is-active" id="panelv1">
<a href="#" class="accordion-title hide-for-medium bb-accordion-title" role="tab"><h6>Prignitz</h6></a>
<div class="tab-wrap-vertical accordion-content bb-accordion-content" data-tab-content role="tabpanel">
<p> ++++TEXT++++ </p>
</div>
</li>
<li class="accordion-item bb-accordion-item toggleType-vertical" id="panelv2">
<a href="#" class="accordion-title hide-for-medium bb-accordion-title" role="tab"><h6>Oder-Spree</h6>
</a>
<div class="tab-wrap-vertical accordion-content bb-accordion-content" data-tab-content role="tabpanel">
<p> ++++TEXT++++ </p>
<img alt="Horst Krause, Schauspieler: \"In Brandenburg bin ich auch zu Hause.
Es grüßt Sie herzlich Polizeihauptmeister Krase.\"" title="Horst Krause - Schauspieler"
src="style.brandenburg.de/img/slider/horst_krause-930x340.jpg">
</div>
</li>
<li class="accordion-item bb-accordion-item toggleType-vertical" id="panelv3">
<a href="#" class="accordion-title hide-for-medium bb-accordion-title" role="tab"><h6>Uckermark</h6></a>
<div class="tab-wrap-vertical accordion-content bb-accordion-content" data-tab-content role="tabpanel">
<p> ++++TEXT++++ </p>
<a href="#" title="Bild vergrößern"
data-featherlight="bild_groß.jpg"><img
alt="Alternativer Bild-Text"
title="Titel zum Bild"
class="bb-image"
src="bild_kleiner.jpg">
</a>
</div>
</li>
<li class="accordion-item bb-accordion-item toggleType-vertical" id="panelv4">
<a href="#" class="accordion-title hide-for-medium bb-accordion-title" role="tab"><h6>Havelland</h6></a>
<div class="tab-wrap-vertical accordion-content bb-accordion-content" data-tab-content role="tabpanel">
<p> ++++TEXT++++ </p>
</div>
</li>
</ul>
</div>
</section>
<script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/2jquery.min.js"></script>
<script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/3jquery.mobile-events.min.js"></script>
<script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/what-input.min.js"></script>
<script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/5foundation.min.js"></script>
<script type="text/javascript" src="style.brandenburg.de/2_4/js/visualComponents/tabs-vertical.js"></script>
<script type="text/javascript" src="style.brandenburg.de/2_4/js/finalApp.js"></script>
Die Inhalte der einzelnen Tabs sollten erst bei der Anzeige des Tabs geladen werden.
keine Beschränkungen