CSS-Gestaltungselemente zur Strukturierung
Akkordeon
Um Seiteninhalte zu komprimieren, können sie eingeklappt werden. Dies hat den Vorteil, dass sehr lange Beschreibungstexte nur bei Bedarf angezeigt werden, während ansonsten lediglich die Überschrift zu sehen ist. Häufig wird dies bei FAQ-Seiten verwendet.
Das Ein- und Ausklappen des Inhalts ist via JavaScript und CSS realisiert. Um den Inhalt von tucbox-collapse-body zu Beginn immer eingeklappt anzuzeigen, ist die Zusatz-Klasse collapsed notwendig. Soll der Inhalt von tucbox-collapse-body standardmäßig angezeigt werden, ist die Zusatz-Klasse „collapse in“ notwendig. Im Aufklappelement tucbox-collapse-heading muss in diesem Fall die Klasse „collapsed“ entfallen, damit das Plus zu Beginn zum Minus wird.
Wir haben die von Bootstrap vorgegebenen CSS-Stile so angepasst, dass Nutzer, die kein JavaScript nutzen, den Inhalt von tucbox-collapse-body immer ausgeklappt sehen.
In der ersten Ebene 7±2. In der zweiten Ebene gibt es keine Vorgabe; wir empfehlen jedoch mindestens zwei und maximal 14.
HTML ist die Abkürzung von „Hypertext Markup Language“. Das ist eine Auszeichnungssprache für netzartige verknüpfte Texte (Hypertexte). CSS ist die Abkürzung von „Cascading Style Sheets“, also gestaffelte Stildefinitionen.
Höchstwahrscheinlich, weil sie noch nicht gestellt wurde.
<div id="accordion-example">
<div class="tucbox-collapse">
<div class="tucbox-collapse-heading">
<p><a class="collapsed" data-toggle="collapse" href="#collapse01">Wie viele Elemente sollte das linke Menü haben?</a></p>
</div>
<div class="tucbox-collapse-body collapse" id="collapse01">
<p>In der ersten Ebene 7±2. In der zweiten Ebene gibt es keine Vorgabe; wir empfehlen jedoch mindestens zwei und maximal 14.</p>
</div>
</div>
<div class="tucbox-collapse">
<div class="tucbox-collapse-heading">
<p><a class="collapsed" data-toggle="collapse" href="#collapse02">Wofür steht eigentlich „HTML“, und wofür „CSS“?</a></p>
</div>
<div class="tucbox-collapse-body collapse" id="collapse02">
<p>HTML ist die Abkürzung von „Hypertext Markup Language“. Das ist eine Auszeichnungssprache für netzartige verknüpfte Texte (Hypertexte).
CSS ist die Abkürzung von „Cascading Style Sheets“, also gestaffelte Stildefinitionen.</p>
</div>
</div>
<div class="tucbox-collapse">
<div class="tucbox-collapse-heading">
<p><a class="collapsed" data-toggle="collapse" href="#collapse03">Wieso wird meine Frage hier nicht beantwortet?</a></p>
</div>
<div class="tucbox-collapse-body collapse" id="collapse03">
<p>Höchstwahrscheinlich, weil sie noch nicht gestellt wurde.</p>
</div>
</div>
</div>Da es die Zusatz-Klasse „collapse in“ besitzt.
<div id="accordion-example-open">
<div class="tucbox-collapse">
<div class="tucbox-collapse-heading">
<p><a class="" data-toggle="collapse" href="#collapse-open">Wieso wird der Inhalt dieses Elements standardmäßig angezeigt?</a></p>
</div>
<div class="tucbox-collapse-body collapse in" id="collapse-open">
<p>Da es die Zusatz-Klasse <strong>„<code>collapse in</code>“</strong> besitzt.</p>
</div>
</div>
</div>Hinweis
Sollten Sie auf einer Webseite mehrere Akkordeons anordnen, beachten Sie bitte die Verwendung eindeutiger Ids, z. B.:<div id="accordion01">…</div><div id="accordion02">…</div>- usw.
Pop-ups
Ergänzende Informationen können Sie auch in einem sich neu öffnenden Pop-up-Element anzeigen, das dann anderen Seiteninhalte überdeckt. Zu einer Zeit kann immer nur ein solches Element geöffnet sein.
Siehe Beschreibung „Nutzung von Pop-up- und Slideshow-Effekten“
