jQuery – FAQ im Accordion Style

Ich beschäftige mich schon seit über einer Woche mit jQuery und bin absolut begeistert. Doch wie schafft man es die wichtigen Informationen für alle Nutzer zugänglich zu machen und dabei trotzdem alles schön, und vor allem semantisch richtig, zu gestalten? An sich ein eine sehr einfache Sache.

Nehmen wir das Beispiel einer typischen FAQ Seite. Wie ist diese aufgebaut? Man hat eine Liste mit Fragen und Antworten. Mehr ist für den Anfang auch nicht notwendig.

<div class="faq">
  <dl>
    <dt>Lorem ipsum dolor</dt>
    <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</dd>
  </dl>
  <dl>
    <dt>Lorem ipsum dolor</dt>
    <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</dd>
  </dl>
  <dl>
    <dt>Lorem ipsum dolor</dt>
    <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</dd>
  </dl>
</div>

Diese kann man natürlich beliebig, mit CSS formatieren. Ich habe mich dabei für das folgende Layout entschieden:

FAQ im Accordion-Style
FAQ im Accordion-Style

Live-Demo: jQuery – FAQ im Accordion Style

Die verwendete Definitionsliste wird bei meinem Beispiel folgendermaßen formatiert. Die Fragen im DT-Element bekommen einen angenehmen blau Ton und einen darauf geigenden Pfeil auf der linken Seite. Dazu verpasse ich der Frage abgerundete Ecken oben-links und oben-rechts. Das ganze sieht dann so aus:

div.faq dt {
  border:1px solid #5F98B5;
  -moz-border-radius-topleft:5px;
  -moz-border-radius-topright:5px;
  -webkit-border-top-rightright-radius:5px;
  -webkit-border-top-left-radius:5px;
  background:#BED5DD url('./icon_arrow_right.png') no-repeat;
  font:bold 1em Arial, Verdana, Helvetica, sans-serif;
  color:#5F98B5;
  margin:1em 0 0 0;
  padding:.2em 20px;
}

Und die Antworten in dem DD-Tag bekommen einen schönen grünen Hintergrund und, gegenteilig zu der Frage, abgerundete Ecken unten-links und unten-rechts.

div.faq dd {
  border-right:1px solid #008000;
  border-bottom:1px solid #008000;
  border-left:1px solid #008000;
  -moz-border-radius-bottomleft:5px;
  -moz-border-radius-bottomright:5px;
  -webkit-border-bottom-rightright-radius:5px;
  -webkit-border-bottom-left-radius:5px;
  background-color:#9FFF9F;
  padding:5px;
}

Ich definiere noch eine weitere Klasse für die Frage, bei der aufgeklappten Antwort. Dabei sollte sich lediglich der kleine Pfeil verändern.

div.faq dt.down {
 background:#BED5DD url('./icon_arrow_down.png') no-repeat;
}

Jetzt kommt die eigentliche Arbeit. Das einbinden von jQuery und das Schreiben des nötigen Codes. Als erstes muss man sichergehen, dass das Script nach dem Fertigladen des DOM ausgeführt wird. Das erreicht man mit dem Event „ready()“. Ist das DOM fertig geladen, so wird der Inhalt zwischen den geschweiften Klammern ausgeführt. Somit kommt der gesamte Code dazwischen:

$(document).ready(function() {
}

Nun müssen die Fragen sofort ausgeblenden, da diese ja erst beim Anklicken der Frage erscheinen sollen. Dafür ist das „hide()“ Event sehr nützlich. Dieses Event blendet die Antworten sofort aus.

Nun muss, beim Klicken auf eine Frage, eine Funktion ausgelöst werden, die die nächste Antwort einblendet. Für das ganze Vorhaben braucht man lediglich zwei Effekte und zwei Selektoren. Dazu gehört „slideToggle()“, „slideUp()“, „next()“ und „siblings()“.

$(this).next('dd').slideToggle('fast').siblings('dd').slideUp('fast');

Wir suchen das nächste DD-Element und ändern seine Sichtbarkeit mit dem Effekt „slideToggle()“. Dieser Effekt erkennt automatisch den momentanen Zustand des Elements und ändert diesen. Im Klartext heißt es: Ist das nächste DD-Element zugeklappt, so wird dieses ausgefahren. Ist das nächste DD-Element bereits ausgefahren, so wird es wieder eingefahren. Dazu werden auch alle Geschwisterelemente von dem DD-Element eingefahren.

Das ist auch schon alles was man für unser Vorhaben benötigt. Man kann das ganze natürlich etwas verfeiner indem man den kleinen Pfeil auf der linken Seite, bei der Frage, nach unten zeigen lässt. Schließlich haben wir extra dafür eine neue Klasse, „.down“, in der CSS-Datei angelegt. Diese Klasse lässt sich sehr einfach mit „toggleClass()“ einsetzen.

Wir sollten auch noch den Mauszeiger anpassen. Beim Drüberfahren der Frage sollte der Mauspfeil zu einem Pointer werden. Man kann mit „css()“, von jQuery, ganz leicht neue Eigenschaften, bei einem bestimmten Event, hinzufügen.

$('.faq dl dt').mouseover(function() {
  $(this).css('cursor', 'pointer')
});

Nun sind wir endgültig am Ende angekommen und haben dieses Script zusammengestellt:

$(document).ready(function() {
  // Macht den Mauszeiger zum "pointer"
  $('.faq dl dt').mouseover(function() {
    $(this).css('cursor', 'pointer')
  });
  // Fährt die Menüpunkte ein und aus
  $('.faq dl dd').hide();
  $('.faq dl dt').click(function() {
    $(this).next('dd').slideToggle('fast').siblings('dd').slideUp('fast');
    $(this).toggleClass('down');
  });
});

Live-Demo: jQuery – FAQ im Accordion Style

ALL-INKL.COM

3 Kommentars zu dem Artikel “jQuery – FAQ im Accordion Style”

  1. Avatar von Wegwerf Email
    Wegwerf Email

    Gutes Tutorial, danke dafür. 😉

    • Avatar von StarSt0rm
      StarSt0rm

      Sehr gerne. Danke für das Kommentar!

  2. Avatar von Chris
    Chris

    Gutes! Dankeschön auch gleich verbaut 🙂