Zur Hauptnavigation springen [Alt]+[0] Zum Seiteninhalt springen [Alt]+[1]

Modulseite mit allen verfügbaren Elementen/Komponenten

Inhaltsbox
<div class="boxContainer">
    <div class="bg-white box clearfix">
        <div class="col-xs-12">
            ...
        </div>
    </div>
</div>
Infobox
<div class="boxContainer">
    <div class="bg-info box clearfix">
        <div class="col-xs-12">
            ...
        </div>
    </div>
</div>
Warnbox
<div class="boxContainer">
    <div class="bg-danger box clearfix">
        <div class="col-xs-12">
            ...
        </div>
    </div>
</div>
Überschriften
<h1>...</h1>

H1-Überschrift

<h2>...</h2>

H2-Überschrift

<h3>...</h3>

H3-Überschrift

<h4>...</h4>

H4-Überschrift

<h5>...</h5>
H5-Überschrift
<h5 class="underlinedBoxHeadline">...</h5>
H5-Überschrift mit Border unten
Absätze

Textblock linksbündig

<p>...</p>

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Textblock rechtsbündig

<p class="text-right">...</p>

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Textblock mittig

<p class="text-center">...</p>

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Textblock im Blocksatz

<p class="text-justify">...</p>

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Linktypen
<a href="..." class="zip-archive-link"><span>...</span></a>
Zip Archiv Download
<a href="..." class="download-link"><span>...</span></a>
Allgemeiner Download
<a href="..." class="pdf-download-link"><span>...</span></a>
Textdokument Download
<a href="..." class="doc-download-link"><span>...</span></a>
Word-Dokument Download
<a href="..." class="txt-download-link"><span>...</span></a>
Textdokument Download
<a href="..." class="spreadsheet-link"><span>...</span></a>
Tabellen-Dokument
<a href="..." class="presentation-link"><span>...</span></a>
Präsentations-Dokument
<a href="..." class="audio-file-link"><span>...</span></a>
Audio-Datei
<a href="..." class="video-file-link"><span>...</span></a>
Video-Datei
<a href="..." class="external-link"><span>...</span></a>
Externer Link
<a href="..." class="mail-link"><span>...</span></a>
E-Mail senden
<a href="..." class="phone-link"><span>...</span></a>
Telefon
<a href="..." class="container-link"><span>...</span></a>
Materialiencontainer öffnen
<a href="..." class="zoom-link"><span>...</span></a>
Vergrößern-Link (z.B. bei Bildern)
<a href="..." class="jump-back-link"><span>...</span></a>
Eine Ebene nach oben
<a href="..." class="jump-up-link"><span>...</span></a>
Nach oben-Link
<a href="..." class="jump-down-link"><span>...</span></a>
Nach unten-Link
<a href="..." class="internal-link"><span>...</span></a>
Interner Link
<a href="..." class="back-link"><span>...</span></a>
Zurück Link
Listen

Unsortierte Liste

<ul>
    <li>...</li>
    <li>...</li>
</ul>
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  • Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
  • 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
  • Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Unsortierte Liste mit Absätzen

<ul>
    <li>
        <p>
            ...
            <br>
            ...
        </p>
    </li>
    <li>
       <p>...</p>
       <p>...</p>
    </li>
</ul>
  • Lorem ipsum dolor sit amet,
    consetetur sadipscing elitr

  • Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

    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

  • 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

  • Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Aufzählung

<ol>
    <li>...</li>
    <li>...</li>
</ol>
  1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  2. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
  3. 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
  4. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Aufzählung mit Absätzen

<ol>
    <li>
        <p>
            ...
            <br>
            ...
        </p>
    </li>
    <li>
       <p>...</p>
       <p>...</p>
    </li>
</ol>
  1. Lorem ipsum dolor sit amet,
    consetetur sadipscing elitr

  2. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

    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

  3. 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

  4. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Linklisten

<ul class="linkList">
    <li>
        <a href="..." class="...">...</a>
    </li>
    <li>
        <a href="..." class="...">...</a>
    </li>
</ul>

Zweispaltige Listen

<ul class="linkList col-count-2">
    <li>
        <a href="..." class="...">...</a>
    </li>
    <li>
        <a href="..." class="...">...</a>
    </li>
</ul>
<ul class="col-count-2">
    <li>...</li>
    <li>...</li>
</ul>
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  • Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  • Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
Tabellen

Tabelle

<div class="table-responsive">
    <table>
        <tbody>
            <tr>
                <td>...</td>
                <td>...</td>
                <td>...</td>
            </tr>
            <tr>
                <td>...</td>
                <td>...</td>
                <td>...</td>
            </tr>
        </tbody>
    </table>
</table>
Lorem ipsum dolor sit amet consetetur sadipscing elitr Lorem ipsum dolor sit amet consetetur sadipscing elitr Link Lorem Ipsum
Stet clita kasd gubergren no sea takimata sanctus est Lorem ipsum dolor Stet clita kasd gubergren no sea takimata sanctus est Lorem ipsum dolor Link Lorem Ipsum
At vero eos et accusam Lorem ipsum dolor sit amet consetetur sadipscing elitr Link Lorem Ipsum

Tabelle ohne Spaltentrenner

<div class="table-responsive">
    <table class="table-unseparated">
        <tbody>
            <tr>
                <td>...</td>
                <td>...</td>
                <td>...</td>
            </tr>
            <tr>
                <td>...</td>
                <td>...</td>
                <td>...</td>
            </tr>
        </tbody>
    </table>
</table>
Lorem ipsum dolor sit amet consetetur sadipscing elitr Lorem ipsum dolor sit amet consetetur sadipscing elitr Link Lorem Ipsum
Stet clita kasd gubergren no sea takimata sanctus est Lorem ipsum dolor Stet clita kasd gubergren no sea takimata sanctus est Lorem ipsum dolor Link Lorem Ipsum
At vero eos et accusam Lorem ipsum dolor sit amet consetetur sadipscing elitr Link Lorem Ipsum

Tabelle mit Überschrift und Fußnote

<p class="componentHeadline tableHeadline">...</p>
<div class="table-responsive">
    <table>
        ...
    </table>
</table>
<p class="small">...</p>

Headline Tabelle Lorem Ipsum

Lorem ipsum dolor sit amet consetetur sadipscing elitr Lorem ipsum dolor sit amet consetetur sadipscing elitr Link Lorem Ipsum
Stet clita kasd gubergren no sea takimata sanctus est Lorem ipsum dolor Stet clita kasd gubergren no sea takimata sanctus est Lorem ipsum dolor Link Lorem Ipsum
At vero eos et accusam Lorem ipsum dolor sit amet consetetur sadipscing elitr Link Lorem Ipsum

Fußnote Lorem ipsum dolor sit amet consetetur sadipscing elitr

Zitate
<blockquote>
    <p>
        ...
    </p>
    <footer>...</footer>
</blockquote>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam at vero eos et accusam et justo duo dolores et ea rebum.

Maximilian Mustermann
Code-Blöcke

Code-Block

<pre><code>...</code></pre>

Code im Text hervorheben

<p>...<code>...</code>...</p>

Mit einem <code>-Block können Code-Teile im Text hervorgehoben werden.

Fußnoten

Fußnote

<p class="small">...</p>

Lorem ipsum dolor sit amet consetetur sadipscing elitr

Fußnotenzeichen

<p>
    ...
    Referenz1<sup id="referenceIndicator_1"><a href="#reference_1"><strong>1</strong></a></sup>
    ...
    Referenz2<sup id="referenceIndicator_2"><a href="#reference_2"><strong>2</strong></a></sup>
    ...
</p>

Lorem ipsum dolor sit amet consetetur sadipscing elitr1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy2 eirmod tempor invidunt ut labore et dolore.

<p class="small">
    <sup id="reference_1"><a href="#referenceIndicator_1"><strong>1</strong></a></sup> ...
</p>
<p class="small">
    <sup id="reference_2"><a href="#referenceIndicator_2"><strong>2</strong></a></sup> ...
</p>

1 Lorem ipsum dolor sit amet consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.

2 Lorem ipsum dolor sit amet consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.

Bilder

Bild über ganze Inhaltsbreite

<div class="fullWidthImageContainer">
    <div class="row">
        <img src="..." class="img-responsive center-block" alt="">
    </div>
    <p class="caption small text-right">...</p>
</div>

Quellenangabe Bild

Text mit Bild im Content links

<div class="textPicContainer picLeft">
    <div class="picContainer">
        <img src="..." class="img-responsive" alt="">
        <p class="caption small">...</p>
    </div>
    <p>
        ...
    </p>
</div>

Quellenangabe Bild

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 ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet 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 At vero eos. 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 aliquyam 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 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. aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio.

Text mit Bild im Content rechts

<div class="textPicContainer picRight">
    <div class="picContainer">
        <img src="..." class="img-responsive" alt="">
        <p class="caption small">...</p>
    </div>
    <p>
        ...
    </p>
</div>

Quellenangabe Bild

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 ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet 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 At vero eos. 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 aliquyam 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 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. aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio.

Bildervorschau

<a data-toggle="modal" data-src="..." href="#imageModal">
    <img src="..." class="img-responsive" alt="...">
</a>
<p class="caption small">
    <a data-toggle="modal" data-src="..." href="#imageModal" class="zoom-link">
        <span>Vergrößern</span>
    </a>
</p>

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 ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet 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 At vero eos. 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 aliquyam 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 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. aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio.

Bilder

Bildergalerie

<div class="clearfix"></div>
<div class="galleryContainer">
    <div class="gallery">
        <div class="galleryItem">
            <div class="fullWidthImageContainer">
                <img class="img-responsive" src="..." alt="">  
                <div class="col-xs-12">
                    <p class="caption small text-right">...</p> 
                </div>
            </div>
            <div class="col-xs-12">
                <h2>...</h2>
            </div>
        </div>
        <div class="galleryItem">
            <div class="fullWidthImageContainer">
                <img class="img-responsive" src="..." alt="">  
                <div class="col-xs-12">
                    <p class="caption small text-right">...</p> 
                </div>
            </div>
            <div class="col-xs-12">
                <h2>...</h2>
            </div>
        </div>
    </div>
    <div class="galleryPagerContainer">
        <div class="galleryPager">
            <ul class="galleryPagerArrows">
            </ul>
        </div>
    </div>
</div>

Teaser

Teaser (Code)
<div class="boxContainer">
    <div class="teaserWithImageLeft bg-white box clearfix">
        <div class="teaserContainer">
            <div class="teaser row">
                <div class="col-xs-12">
                    <div class="teaserImageContainer col-sm-4 col-xs-12">
                        <div class="row">
                            <img src="..." class="img-responsive center-block" alt="">
                        </div>
                    </div> 
                    <div class="teaserTextContainer col-sm-8 col-xs-12">
                        <div class="teaserText">
                            <h4>...</h4>
                            <p>...</p>
                        </div>
                        <button class="btn btn-primary pull-right more-link">Mehr</button>
                    </div>
                </div>
            </div>    
        </div>
    </div>
</div>

Standorte

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

Karteireiter

Karteireiter (Code)
<div class="boxContainer">
    <div class="bg-white box clearfix">
        <ul class="nav nav-tabs">
            <li class="active">
                <a class="h4" href="#tab-content-1" data-toggle="tab">
                    ...
                </a>
            </li>
            <li>
                <a class="h4" href="#tab-content-2" data-toggle="tab">
                    ...
                </a>
            </li>
            <li>
                <a class="h4" href="#tab-content-3" data-toggle="tab">
                    ...
                </a>
            </li>
        </ul>
        <div class="tab-content col-xs-12">
            <div id="tab-content-1" class="tab-pane active in">
                ...
            </div>
            <div id="tab-content-2" class="tab-pane">
                ...
            </div>
            <div id="tab-content-3" class="tab-pane">
                ...
            </div>
        </div>
    </div>
</div>

Der Inhalt des jeweiligen tab-pane ist beliebig, d.h. hier können Texte, Listen, Bilder, News, usw. gepflegt werden.

Die ID #tab-pane-X kann beliebig verändert werden. Wichtig ist nur, dass die ID des tab-panes mit dem href-Attributes des zugehörigen Reiters übereinstimmt.

Der aktive Reiter erhält auf dem li-Element die Klasse .active. Der zugehörige tab-pane erhält die Klassen .active und .in. Beim Klicken auf einen Reiter werden diese Klassen automatisch neu gesetzt. Das initiale Setzen dieser Klassen ermöglicht, einen Reiter standardmäßig anzuzeigen (in der Regel der erste).

optionale Bildbeschreibung

Text

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 ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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 ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet Link im Fließtext 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 Link im Fließtext Hover.

Zwischenheadline

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Ziehharmonika

Ziehharmonika (Code)
<div class="boxContainer">
    <div class="accordionContainer bg-white box clearfix">
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
                <div class="panel-heading" role="tab">
                    <h4 class="panel-title">
                     <a role="button" data-toggle="collapse" data-parent="#accordion" href="#panel-collapse-1" aria-expanded="true" aria-controls="panel-collapse-1">
                        ...
                        <span class="icon-caret-up accordionArrow pull-right"></span>
                     </a>
                </h4>
            </div>
            <div id="panel-collapse-1" class="panel-collapse collapse in" role="tabpanel">
                <div class="panel-body">
                    ...
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" role="tab">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#panel-collapse-2" aria-expanded="false" aria-controls="panel-collapse-2">
                        ...
                        <span class="icon-caret-up accordionArrow pull-right"></span>
                   </a>
                </h4>
            </div>
            <div id="panel-collapse-2" class="panel-collapse collapse" role="tabpanel">
                <div class="panel-body">
                    ...
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" role="tab">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#panel-collapse-3" aria-expanded="false" aria-controls="panel-collapse-2">
                        ...
                        <span class="icon-caret-up accordionArrow pull-right"></span>
                   </a>
                </h4>
            </div>
            <div id="panel-collapse-3" class="panel-collapse collapse" role="tabpanel">
                <div class="panel-body">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>

Der Inhalt des jeweiligen panel-body ist beliebig, d.h. hier können Texte, Listen, Bilder, News, usw. gepflegt werden.

Die ID #panel-collapse-X kann beliebig verändert werden. Wichtig ist nur, dass die ID des panel-collapse mit dem href- und des aria-controls-Attributes des zugehörigen panel-title übereinstimmt.

Das aria-controls-Attribut des a-Tags unterhalb des aktiven panel-title wird auf true gesetzt. Das panel-collapse erhält die Klassen collapse und in.
Inaktive Elemente haben diese beiden Klassen nicht. Stattdessen erhält das a-Tag unterhalb des panel-title die Klassen collapsed und das aria-expanded-Attribut wird auf false gesetzt.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat

vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat

vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat

vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat

vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.