jQuery anime une div pour descendre quand une autre s’anime

J’ai 3 divs sur ma page, A, B et C. Quand je clique sur AI, je veux que ça monte de 200 pixels et que je rajoute la classe “active” classe. J’ai réussi à le faire, cependant, j’ai maintenant besoin de le faire pour qu’un seul div soit toujours actif, donc si un div est actif (ou “actif”) et que je clique sur un autre, le div “actif” descend d’abord puis l’autre div monte.

Par exemple, si A est actif et que je clique sur B, A doit descendre d’abord puis B ensuite.

Voici mon code pour déplacer les divs (vous verrez qu’il y a aussi un élément “close_A” qui est juste une croix qui ferme aussi le div):

$(document).ready(function() { // OPEN AND CLOSE A // $('.A').toggle(function() { $('.A').animate({ top: '-=200' }, 1000).addClass('active'); },function() { $('.A').animate({ top: '+=200' }, 1000).removeClass('active'); }) $('.close_A').click(function() { $(".A").click(); }); // OPEN AND CLOSE B // $('.B').toggle(function() { $('.B').animate({ top: '-=200' }, 1000).addClass('active'); },function() { $('.B').animate({ top: '+=200' }, 1000).removeClass('active'); }) $('.close_B').click(function() { $(".B").click(); }); // OPEN AND CLOSE C // $('.C').toggle(function() { $('.C').animate({ top: '-=200' }, 1000).addClass('active'); },function() { $('.C').animate({ top: '+=200' }, 1000).removeClass('active'); }) $('.close_C').click(function() { $(".C").click(); }); }); 

Ma question est donc la suivante: comment puis-je faire en sorte que, lorsque l’une d’elles est ouverte et que je clique sur une autre, la première est fermée?