<!-- CSS link (HTML header), replace with "https://style.brandenburg.de/cdn/bb/css/app.css" -->
<link type="text/css" rel="stylesheet" href="https://style.brandenburg.de/cdn/bb/css/themes/mediumBordeaux.css"/>
5. Komponenten
- 5.1 Accordion
- 5.2 Pictures
- 5.3 Formulare
- 5.4 Icons
- 5.5 Kalender
- 5.6 Listen
- 5.7 Mega-Menü
- 5.8 Mobile-Menü
- 5.9 Meldungen
- 5.10 Slider
- 5.11 Tabellen
- 5.12 Tabs (Horizontal)
- 5.13 Tabs (Vertikal)
- 5.14 Teaser
- 5.15 Tonaufnahmen
- 5.16 Videos
- 5.17 Externe Inhalte
Platzierung
5.1 Accordion
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.
-
Angermünde
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.
-
Beelitz
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.
-
Cottbus
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.
-
Elsterwerda
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.
-
Quelltext
<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"><h3>Angermünde</h3></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"><h3>Beelitz</h3> </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"><h3>Cottbus</h3></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"><h3>Elsterwerda</h3></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>
-
Benötigtes Javascript
<script type="text/javascript" src="style.brandenburg.de/js/vendor/jquery.min.js"></script> <script type="text/javascript" src="style.brandenburg.de/js/vendor/what-input.min.js"></script> <script type="text/javascript" src="style.brandenburg.de/js/foundation.min.js"></script> <script type="text/javascript" src="style.brandenburg.de/js/app.js"></script>
Aufbau
- Das Accordion besitzt eine Akzentlinie am aktiven Element in der Themenfarbe.
- Der Außenrahmen ist HELLGRAU.
- Die Komponente besitzt keine eigene Hintergrundfarbe und orientiert sich am Untergrund.
- Der Beitragstitel ist als „Überschrift 3“ ausgeführt.
- Die Schriftfarbe der Beitragstitel ist variabel (Grund- und Standardfarben).
Spezifische Anforderungen
Medien innerhalb der nicht aktiven Accordion-Elemente sollten bei Aufruf nachgeladen werden, um die Ladegeschwindigkeit sinnvoll zu optimieren.
Barrierefreiheit
keine Beschränkungen
Aktionsverhalten
Es wird stets nur ein Accordion-Element geöffnet. Die Komponente nutzt standardmäßig den Toggle-Effekt. Alle Accordion-Elemente können geschlossen sein.
Responsive Design
Bei kleineren Auflösungen streckt sich die Komponente auf die Gesamtbreite.