Я пытаюсь создать базовую анимацию из двух divs с помощью функции jQuery .toggle().
Основная идея состоит в том, чтобы переключить видимость двух дополнительных разделов с картой и контактной формой.
Я заставил все работать, как я хотел, но заметил ошибку.
Here is the link to the demo on Codepen -- Связь
To see the bug just hit 'Location' then 'Get in touch' and again 'Location'.
Я думаю, что это можно исправить с помощью простой функции if else, но я не могу придумать правильное решение, так как не очень хорошо знаю JS.
Кто-нибудь, помогите мне, пожалуйста. Заранее спасибо!



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Как насчет чего-то вроде это. По сути, просто отслеживая, отображаются ли форма и карта, и выполняя анимацию только при необходимости.
$(document).ready(function() {
// toggle map visibility
$("#toggle-map").click(function() {
$(".target-map").toggle('left');
});
// toggle contact form visibility
$("#toggle-form").click(function() {
$(".target-form").toggle('left');
});
var showingMap = false
var showingForm = false
function animate() {
var changeInLeft = !showingMap && !showingForm ? "0px" : "-245px"
$(".left-part").stop().animate({ left: changeInLeft }, 100);
}
// hide one on click
$(document).on("click", "#toggle-map", function(event) {
$(".target-form").hide();
event.preventDefault();
if (showingForm) showingForm = !showingForm;
showingMap = !showingMap;
animate();
});
$(document).on("click", "#toggle-form", function(event) {
$(".target-map").hide();
event.preventDefault();
showingForm = !showingForm;
if (showingMap) showingMap = !showingMap;
animate();
});
});
Большое спасибо!