Häufig wird ein solches Element für Untermenüs oder für FAQ
(frequently asked questions) verwendet. Oft wird dafür einfach ein fertiges
Widget aus einer Bibliothek eingebunden. In diesem Beitrag sehen wir uns
allerdings an, wie man so etwas ganz leicht selbst bauen (und somit auch ganz
individuell gestalten kann).
Unser Beispiel werden wir für die FAQ erstellen, aber
natürlich lässt sich auch jeder andere beliebige Inhalt einfügen.
Mit ziemlicher Sicherheit befindet sich das Accordion-Widget
in einem Container innerhalb der Seite; damit fangen wir also an. Der Container
bekommt eine ID (oder, wenn der Container inklusive Styling mehrfach verwendet
werden soll, eine Klasse).
Darin liegt noch ein weiterer Container, für das eigentliche
Widget, und darin wiederum die Boxen für Fragen und Antworten. Wenn es möglich
sein soll, die Antworten weiter zu zergliedern oder noch weitere Inhalte,
beispielsweise Bilder, einzufügen, kommen noch entsprechend weitere Container
(Divs) hinzu. Alle bekommen Klassen, damit wir sie später im CSS und mit jQuery
ansprechen können.
Eine von mehreren anderen Möglichkeiten wäre, die Fragen und
Antworten in eine verschachtelte Liste zu verpacken. Für dieses Beispiel werden allerdings Divs verwendet.
Es ist natürlich auch möglich, hierfür mehr als nur eine
Klasse zu vergeben (wenn beispielsweise Text- und Bildabschnitte eingefügt und
unterschiedlich gestylt werden sollen).
Question- und answer-container können wir einfach mittels
copy + paste so oft vervielfältigen, wie wir Fragen und Antworten haben. Für
unser Beispiel werden es jeweils fünf.
In die fertige Grundstruktur können wir nun etwas Content
einfüllen. „Frage 1“ und „Antwort 1“ sind für die Übung völlig ausreichend –
aber Eurer Fantasie sind natürlich hierbei keine Grenzen gesetzt!
Unser HTML-Teil bisher:
Das alles im Browser betrachtet ergibt noch kein schönes
Bild:
Derzeit haben wir ja noch kein Styling festgelegt. Also
bekommen wir nur die reine Textinformation angezeigt – untereinander, da sich
die Textstellen jeweils in ihrem eigenen Div, also einem Blockelement,
befinden.
Also machen wir uns gleich mal daran, das Erscheinungsbild
ein bisschen zu verbessern.
Styling des Accordion-Widgets mit CSS
Wie das Accordion-Widget schließlich aussehen soll, bleibt
natürlich jedem selbst überlassen. Das Styling sollte schließlich zur
jeweiligen Seite passen. Aber vielleicht könnt Ihr Euch hier die eine oder
andere Idee holen.
Starten wir mit dem accordion-container:
Er bekommt eine feste Breite. In diesem Beispiel sind es Pixel; für die
jeweilige Seite und den jeweiligen Anwendungsbereich sind vermutlich andere
Größenangaben sinnvoller. Außerdem bekommt er vorübergehend einen Rahmen, damit
wir gleich sehen, wo unser Element denn eigentlich liegt. Eine fixe Höhe
bekommt er NICHT – er soll ja mit dem Inhalt mitwachsen können.
Wenn für Fragen und Antworten dieselbe Schriftart verwendet
werden soll, können wir das auch hier definieren, ansonsten im question- bzw. answer-container. Das gleiche gilt für die Schriftgröße und Farbe.
In diesem Beispiel sollen Fragen und Antworten
unterschiedliche Schriftarten, -größen und -farben bekommen, daher wenden wir
uns gleich einmal den entsprechenden Containern zu. Auch eine Hintergrundfarbe und
ein Padding wird vergeben:
Das vorläufige Ergebnis sieht jetzt so aus:
Das sieht ja beinahe schon wie ein Accordion aus. Jetzt noch
Padding für question- und answer-container, answer-box und für letztere zusätzlich noch einen border-bottom, damit sich die Elemente
gut voneinander abgrenzen.
Was passiert, wenn der Text länger ist, als eine Zeile? In
diesem Fall kein Problem – da wir keine fixe Höhe vergeben haben, wachsen die
Container (in diesem Fall answer-box,
answer-container und accordion-container)
mit dem Inhalt mit:
Für ein Dropdown-Menu wäre das schon ein einigermaßen
akzeptables Aussehen, für FAQ würden wir vermutlich noch ein wenig daran
verändern. Viel Spaß beim Herumspielen mit CSS! Lasst Eure Fantasie mal so
richtig mit Euch durchgehen.
Für diese Übung setzen wir lediglich noch ein paar kleine
Akzente (das vollständige CSS dazu findet Ihr in diesem Codepen-Beispiel) und
einen :hover – Effekt für die question-container:
Empfehlenswert:
cursor: pointer; setzen, damit der Cursor als Handsymbol beim :hover angezeigt wird.
Eines bleibt noch im CSS zu tun: die Antworten wollen wir
noch nicht sehen. Sie sollen erst mittels jQuery sichtbar gemacht werden, wenn
wir auf die Frage klicken. Daher machen wir die Antworten mittels display:none unsichtbar.
jQuery – Anweisungen
Um jQuery einsetzen zu können, müssen wir diese
JavaScript-Bibliothek erst einmal einbinden. Das können wir tun, indem wir
jQuery herunterladen und auf den entsprechenden Ordner verweisen, oder über ein CDN (Content
Delivery Network).
Google oder Microsoft bieten dies an – anstatt jQuery
herunterzuladen und selbst mitzuliefern kann es auch eingebunden werden, indem
folgende Zeile in den <head> -Teil Eures html-Files eingebunden wird:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Das Schöne an jQuery ist, dass für die Funktionalität ein
Zweizeiler völlig ausreichend ist:
Das $-Zeichen steht für jQuery; es heißt bloß: „Jetzt kommt
jQuery.“
$(document).ready bedeutet, dass unsere Funktionen erst
ausgeführt werden, wenn unsere HTML-Seite fertig geladen ist.
Mit $('.question-container') sprechen wir den question-container an – beachte, dass
hier der gleiche Selektor verwendet wird, wie in CSS!
Und schließlich sagen wir noch, was passieren soll, wenn wir
draufklicken:
$(this) bedeutet, wir nehmen genau das Element, auf das wir
draufgeklickt haben, und wählen mit next() das nächste Element innerhalb unseres
HTML-Dokuments aus – in unserem Fall also den answer-container. Und zwar genau den answer-container, der auf genau den question-container folgt, auf den wir gerade geklickt haben.
Und damit machen wir ein slideToggle(). Das heißt nichts
anderes, als dass geprüft wird, ob das Element gerade sichtbar ist, oder nicht,
und die entsprechende Aktion ausgeführt wird: Wenn das Element (unser
Antwort-Container) beim Klicken gerade sichtbar ist, wird er unsichtbar
gemacht, ist er gerade unsichtbar, wird er sichtbar gemacht.
Auch der Slide-Effekt ist in dieser praktischen
jQuery-Methode bereits mit eingeschlossen. Wenn wir noch einen Wert (in
Millisekunden) übergeben, können wir sogar entscheiden, wie schnell der
Slide-Effekt abgespielt werden soll:
slideToggle(400) bedeutet, dass der Slide-Effekt 400ms, also
weniger als eine halbe Sekunde, dauert.
Das vollständige Beispiel könnt Ihr in diesem
Codepen-Beispiel ansehen.
Viel Spaß beim Herumprobieren! Und vielleicht sehen wir uns
ja in einem ppedv-Kurs zum Thema JavaScript/jQuery!