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, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.

Beelitz

Cottbus

Elsterwerda

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"><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.
Die Schriftfarbe der Beitragstitel ist variabel (Grund- und Standardfarben).

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.
Die Schriftfarbe der Beitragstitel ist variabel (Grund- und Standardfarben).

Spezifische Anforderung

Medien innerhalb der nicht aktive 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