7.2.2.3.2 Akkordeon-Texte

 Abb. 58: Akkordeon-Texte

Die Textinhalte zu den Überschriften sind zunächst nicht zu sehen und können ausgeklappt werden

Code

Grundstruktur

<div class="accordion"> 
	<input id="acc-1" type="checkbox" name="acc">
	<label for="acc-1">ÜBERSCHRIFT1</label>
	<div class="accordion_content">
		<p>TEXT1</p> 
	</div>
</div>

weitere Elemente bekommen entsprechend fortlaufende IDs

<div class="accordion"> 
	<input id="acc-2" type="checkbox" name="acc">
	<label for="acc-2">ÜBERSCHRIFT2</label> 
	<div class="accordion_content">
		<p>TEXT2</p> 
	</div>
</div>

Farbige Akkordeon-Texte

 Abb. 59: Farbige Akkordeon-Texte

Farben kann man durch das Hinzufügen einer Farbklasse verändern. Die Farbklasse wird einfach hinter das accordion geschrieben, z.B. div class="accordion red". Soll auch der Inhalts-Hintergrund gefärbt werden, muss noch eine weitere Klasse hinzugefügt werden: div class="accordion full_color blue". Jedes Element, das umgefärbt werden soll, braucht diese Style-Anweisung.

 Abb. 60: Beispiel für einen blau gefärbten Akkordeon-Text

 Abb. 61: Beispiel für einen blau gefärbten Akkordeon-Text mit farbigen Hintergrund (full_color)

Code

Verfügbare Farbklassen

<div class="accordion blue"> ...
<div class="accordion turquoise"> ...
<div class="accordion green">  ...
<div class="accordion yellow"> ...
<div class="accordion orange"> ...
<div class="accordion red-orange"> ...
<div class="accordion red"> ...
<div class="accordion pink"> ...
<div class="accordion purple"> ...
<div class="accordion blue-gray"> ...
<div class="accordion dark-blue"> ...

Mit farbigem Hintergrund

<div class="accordion full_color blue"> ...
<div class="accordion full_color turquoise"> ...
<div class="accordion full_color green"> ...
<div class="accordion full_color yellow"> ...
<div class="accordion full_color orange"> ...
<div class="accordion full_color red-orange"> ...
<div class="accordion full_color red"> ...
<div class="accordion full_color pink"> ...
<div class="accordion full_color purple"> ...
<div class="accordion full_color blue-gray"> ...
<div class="accordion full_color dark-blue">...

Beispiel: Akkordeon-Texte

Code

Beispiel<source lang="xml">

     <input id="acc-1" name="acc" type="checkbox">
     <label for="acc-1">Herzlich willkommen!</label>

Einführung

       <a href="$URL">Einführung</a>

Definition

Was tun mit Blumen?

     <input id="acc-2" name="acc" type="checkbox">
     <label for="acc-2">Blumenarten</label>

Rosen

Tulpen

Gänseblümchen

Lilien

     <input id="acc-3" name="acc" type="checkbox">
     <label for="acc-3">Blumenpflege</label>

Gießen

Blumenpflege im Urlaub

Auf Wiedersehen!

Verlinkung auf ein Element im Akkordeon

Soll von einer anderen Seite des MOOCs auf ein einzelnes Element im Akkordeon verlinkt werden, so wird einfach die id "acc-x" mit # an die URL gehängt.

Soll das Akkordeon-Element dabei gleich geöffnet werden, so ist auf der Seite des Akkordeons folgender Code unterzubringen (die Zeilenumbrüche sind natürlich zu entfernen):

Code

<img src="$Bild-URL" id="accordionloader" style="display:none;visibility:
hidden;opacity:0;" onload="getElementById(''+window.location.href.slice
(window.location.href.indexOf('#') + 1)+'').checked = true; getElementById
('accordionloader').remove()">