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