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
Hinterlasse einen Kommentar