Toolbar-Menü
 
Sie sind hier: Start Komponenten
5. Komponenten
  1. 5.1 Accordion
  2. 5.2 Bilder
  3. 5.3 Formulare
  4. 5.4 Icons
  5. 5.5 Kalender
  6. 5.6 Listen
  7. 5.7 Mega-Menü
  8. 5.8 Mobile-Menü
  9. 5.9 Meldungen
  10. 5.10 Slider
  11. 5.11 Tabellen
  12. 5.12 Tabs (Horizontal)
  13. 5.13 Tabs (Vertikal)
  14. 5.14 Teaser
  15. 5.15 Tonaufnahmen
  16. 5.16 Videos
  17. 5.17 Externe Inhalte
Platzierung
4.2.1
4.2.2
4.2.3
 
4.2.4
4.2.5
4.3.1
4.3.2
4.3.3
4.4.1
4.4.2
4.4.3
4.4.4

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.

    Horst Krause, Schauspieler: \

  • Quelltext
    Quelltext kopieren 
    <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>

  • Benötigtes Javascript

     
    <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>
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 5“ 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.

Seite drucken