Accordion-Widget selbst bauen mit jQuery, HTML und CSS

0Kommentare

LeonardH

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.