jQuery Slide Panel sichern - jquery, jquery-animieren

Ich habe ein Panel, das ein responsives Karussell enthält, also muss ich die Höhe des Behälters beibehalten, was bedeutet, dass ich ihn nicht verwenden kann

display:none

Ich habe also die Höhe beibehalten und positioniere sie außerhalb der Sichtweite, wenn der Benutzer auf eine Schaltfläche klickt, die er nach unten gleitet.

Ich muss nur zulassen, dass der Benutzer erneut auf die Schaltfläche klickt und sie nach oben gleiten lässt.

Hier ist was ich habe:

$("a.myCourses").on("click", function() {
$("#courseCart").animate({"top": "0"}, 1000);
$(this).addClass("open");
});

Dadurch wird das Panel nach unten verschoben. Ich fügte eine Klasse hinzu und dachte, ich könnte den Button erneut anvisieren und ihn nach oben schieben lassen, aber das hat nicht funktioniert.

Danke für jede Hilfe.

Antworten:

Sie sollten einen Schalter hinzufügen, um zu überprüfen, ob Ihr Karussell bereits geöffnet ist. Dann können Sie es wieder nach oben schieben. Sieh sie in dieser Geige http://jsfiddle.net/gbzhhc5d/3/

$("a.myCourses").on("click", function() {
if($(this).hasClass("open")) {
$("#courseCart").animate({"top": "-100"}, 1000);
$(this).removeClass("open");
}
else {
$("#courseCart").animate({"top": "0"}, 1000);
$(this).addClass("open");
}

});