<!-- 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/Seegruen-66CC66.css"/>
Inhaltselemente können platzsparend in einem Accordion angezeigt werden. Dabei wird immer nur ein Beitrag dargestellt, während die Inhalte der anderen Beiträge versteckt werden und nur ihre Überschriften sichtbar sind. Die Inhalte der einzelnen Beiträge müssen zeitlich vor den Medien geladen werden. Einzelne Accordion-Elemente können auch mit einem Beitrag als weiterführende Inhalte genutzt werden.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et earebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sitamet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et earebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sitamet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et earebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sitamet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et earebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sitamet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est.
<div class="row bb-accordion-component">
<div class="columns">
<ul class="accordion bb-accordion" data-allow-all-closed="true" data-accordion>
<li class="accordion-item bb-accordion-item" data-accordion-item>
<a href="#" title="Angermünde"
class="accordion-title bb-accordion-title first-accordion-title"><h5>Angermünde</h5></a>
<div class="accordion-content bb-accordion-content" data-tab-content>
<p>
++++TEXT++++
</p>
</div>
</li>
<li class="accordion-item bb-accordion-item" data-accordion-item>
<a href="#" title="Beelitz" class="accordion-title bb-accordion-title"><h5>Beelitz</h5>
</a>
<div class="accordion-content bb-accordion-content" data-tab-content>
<p>
++++TEXT++++
</p>
</div>
</li>
<li class="accordion-item bb-accordion-item" data-accordion-item>
<a href="#" title="Cottbus" class="accordion-title bb-accordion-title"><h5>Cottbus</h5></a>
<div class="accordion-content bb-accordion-content" data-tab-content>
<p>
++++TEXT++++
</p>
</div>
</li>
<li class="accordion-item bb-accordion-item" data-accordion-item>
<a href="#" title="Elsterwerda" class="accordion-title bb-accordion-title"><h5>Elsterwerda</h5></a>
<div class="accordion-content bb-accordion-content" data-tab-content>
<p>
++++TEXT++++
</p>
<div>
<img alt="Horst Krause, Schauspieler: \"In Brandenburg bin ich auch zu Hause.
Es grüßt Sie herzlich Polizeihauptmeister Krause.\""
title="Horst Krause - Schauspieler"
src="bild.jpg">
</div>
</div>
</li>
</ul>
</div>
</div>
<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/5foundation.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/finalApp.js"></script>
Medien innerhalb der nicht aktiven Accordion-Elemente sollten bei Aufruf nachgeladen werden, um die Ladegeschwindigkeit sinnvoll zu optimieren.
keine Beschränkungen
Es wird stets nur ein Accordion-Element geöffnet. Die Komponente nutzt standardmäßig den Toggle-Effekt. Alle Accordion-Elemente können geschlossen sein.
Bei kleineren Auflösungen streckt sich die Komponente auf die Gesamtbreite.