Tutorials

Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.

Zurück zur Übersicht

Bootstrap 3+4: Zeitverzögertes Akkordeon (Delayed Collapse) umsetzen

#Tutorials#Bootstrap#Javascript#jQuery

Für ein Projekt brauchte ich letztens eine kleine Verzögerung, bis ein Bootstrap Collapse (Akkordeon) geöffnet, bzw. geschlossen werden sollte. Das Ganze hing mit einer CSS Animation zusammen. Folgendes ist dabei herausgekommen und ist sehr leicht zu bedienen und es funktioniert wunderbar.

$('[data-delayed-toggle="collapse"]').on('click', function(e) {

  var delay = $(this).data('delay') || 1000,
  target = $($(this).attr('href'));

  window.setTimeout(function() {
        
    if (target.hasClass('show')) {
    //if (target.hasClass('in')) { comment in if bootstrap 3, class is "in" not "show"
      target.collapse('hide');
    } else {
      target.collapse('show');
    }
  }, delay);

})

Die Benutzung ist relativ einfach und ähnlich dem Vorgehen von Bootstrap selbst. Anstelle von [data-toggle="collapse"] am Link im Panel-Header zu haben, nimmt man [data-delayed-toggle="collapse"]. Zudem kann man mit data-delay noch die Verzögerung in Milisekunden einstellen. Ist nichts gesetzt wird 1 Sekunde verzögert.


Kommentare

  • Alex
    sogar für mich als absoluter Anfänger alles klar :)
    Antworten
  • Max
    Danke!!das ist richtig was ich brauche
    Antworten
    • Andre Rinas
      Freut mich, dass ich helfen konnte!
      Antworten

Hinterlasse einen Kommentar

Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Kommentar wird gespeichert
Danke für deinen Kommentar! Sobald er freigegeben wurde erscheint er hier.