[jQuery] 1 bouton, 2 clicks pour 2 événements différents

Bonjour à toutes et tous,

j'ai un problème tout simple que je ne parviens pas à résoudre :

J'ai un bouton sur lequel un événement on('click') déclenche une fonction pour ouvrir un menu caché. Jusque là rien de bien sorcier sauf que j'aimerais que ce même bouton gère aussi la fermeture du menu sur le click suivant.

J'ai quelque chose qui fonctionne mais seulement à la première utilisation (donc au premier click, le menu apparaît et au second il disparaît) car ensuite, lors du premier click, les deux animations s'enchaînent.

$btnNavigation
            .on('click', function (e) {
                e.preventDefault();
                $all.stop(true, true);
                $container.animate({marginLeft: "295px"}, 1000);
                $elementsCentre.animate({marginLeft: "300px"}, 1000);
                $sidebar.animate({marginLeft: "300px"}, 1000);
                $btnNavigation
                     .animate({marginLeft: "325px"}, 1000);
                     .on('click', function (e) {
                            e.preventDefault();
                            $container.animate({marginLeft: "0px"}, 1000);
                            $elementsCentre.animate({marginLeft: "0px"}, 1000);
                            $sidebar.animate({marginLeft: "0px"}, 1000);
                            $btnNavigation.animate({marginLeft: "30px"}, 1000);
                        });
            });

J'ai essayé pas mal d'autres choses et notamment à l'aide d'un cookie mais je n'arrive à rien.

Quelqu'un a-t-il une solution ?

Merci d'avance