jQuery Accordion ohne jQuery-UI
7. Januar 2015
Nur ein kleiner Hack am Rande: Um ein jQuery-Accordion zu initialisieren, bedarf es nicht unbedingt der Einbindung der knapp 300 kB schweren jQuery-UI-Bibliothek - es geht auch folgendermaßen (hier mit einer Definition List):
$('.accordion dd:not(:first-of-type)').hide();
$('.accordion dt').on('click', function (e) {
e.preventDefault();
$(this).parent('dl.accordion').children('dd:visible').slideUp('slow');
$(this).nextUntil('dt').filter(':not(:visible)').slideDown('slow');
});
Die erste Zeile blendet alle <dd>
s außer dem ersten aus, die zweite Zeile initialisiert den Toggle. Das passende HTML:
<dl class="accordion">
<dt>Erster Eintrag</dt>
<dd>Absatz des ersten Eintrags</dd>
<dt>Zweiter Eintrag</dt>
<dd>Absatz des zweiten Eintrags</dd>
</dl>
Das Ganze noch per CSS stylen (.accordion dt { cursor: pointer; }
nicht vergessen) und fertig ist das Akkordeon.
Themen: jQuery, Accordion, Hacks
Kommentar schreiben