Accordion-Widget selbst bauen mit jQuery, HTML und CSS

Ein Accordion-Widget ist ein Element auf einer Website, das sich „zusammenfalten“ lässt wie ein Akkordeon – daher der Name.




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

 

HTML-Struktur für das Accordion-Widget

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.

Im Beispiel heißen die Elemente folgendermaßen:

faq-container (ID)  - Der Abschnitt, in dem sich die FAQ befinden sollen.

accordion-container (Klasse) – Das eigentliche Accordion-Widget.

question-container (Klasse) – Da stehen später die Fragen drin – wir brauchen davon also so viele, wie es FAQ gibt.

answer-container (Klasse) – Das ist der Container für die Antworten – wir brauchen also so viele davon, wie es Fragen gibt: für jede Frage eine Antwort-Box. Es werden immer ein Frage- und Antwortcontainer abwechselnd angeordnet.

answer-box (Klasse) – Wenn die Antwort noch weiter untergliedert werden soll, brauchen wir innerhalb des Antwort-Containers noch weitere Divs.

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

Bisher sieht unser HTML-Teil also folgendermaßen aus:




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!












Kommentare sind geschlossen