<!-- 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/Sandbraun-CC9966.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">
<ul class="tabs bb-tabs show-for-medium contained" data-tabs id="example-tabs">
<li class="tabs-title bb-tabs-title is-active panel1">
<a title="Prignitz" href="#panel1" aria-selected="true">Prignitz</a>
</li>
<li class="tabs-title bb-tabs-title panel2" id="yolo">
<a title="Oder-Spree" href="#panel2">Oder-Spree</a>
</li>
<li class="tabs-title bb-tabs-title panel3">
<a title="Uckermark" href="#panel3">Uckermark</a>
</li>
<li class="tabs-title bb-tabs-title bb-tabs-last panel4">
<a title="Havelland" href="#panel4">Havelland</a>
</li>
</ul>
<ul class="accordion bb-accordion bb-accordion-horizontal responsive-tabs" data-allow-all-closed="true"
data-accordion
data-tabs-content="example-tabs" role="tablist">
<li class="accordion-item bb-accordion-item toggleType is-active" id="panel1">
<a href="#" class="accordion-title hide-for-medium bb-accordion-title" role="tab"><h6>Prignitz</h6>
</a>
<div class="tab-wrap accordion-content bb-accordion-content" data-tab-content role="tabpanel">
<p> ++++TEXT++++ </p>
</div>
</li>
<li class="accordion-item bb-accordion-item toggleType" id="panel2">
<a href="#" class="accordion-title hide-for-medium bb-accordion-title" role="tab"><h6>
Oder-Spree</h6>
</a>
<div class="tab-wrap 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" id="panel3">
<a href="#" class="accordion-title hide-for-medium bb-accordion-title" role="tab"><h6>Uckermark</h6>
</a>
<div class="tab-wrap 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" id="panel4">
<a href="#" class="accordion-title hide-for-medium bb-accordion-title" role="tab"><h6>Havelland</h6>
</a>
<div class="tab-wrap accordion-content bb-accordion-content" data-tab-content role="tabpanel">
<p> ++++TEXT++++ </p>
</div>
</li>
</ul>
</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-horizontal.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