дорогие разработчики) Прошу вас помочь, с одним кодом... Не могу разобраться, как правильно решить проблему вывода...
Есть 2 кнопки, они при клике вызывают единое окно, но содержимое окна должно меняться, в зависимости от нажатой кнопки. То-есть при нажатии на Кнопку 1, слева выезжает окно с бирюзовым фоном , в котором есть блок с id "#first" синего цвета. А вот при нажатии Кнопки 2, выезжает то же окно бирюзового цвета, но в нем уже должен быть блок с id "#last" красного цвета. Вроде, мой код работает, но не совсем корректно, так как при нажатии любой кнопки, выезжает окно с бирюзовым фоном, но блок постоянно id "#last" красного цвета.. Код прилагается, надеюсь на вашу помощь)
$(document).ready(function() {
$("#button-1").click(function() {
$(".modal").toggleClass("hidden").toggleClass("#first");
});
$("#button-2").click(function() {
$(".modal").toggleClass("hidden").toggleClass("#last");
});
});
body {
display: flex;
flex-direction: column;
margin: 0;
width: 100%;
background-color: rgb(224, 224, 224);
font-family: Arial, Helvetica, sans-serif;
}
header {
display: flex;
position: fixed;
width: 100%;
height: 50px;
background-color: black;
transition: all 0.5s ease;
}
button {
width: 140px;
height: 30px;
color: aqua;
background: blue;
border: 0;
border-radius: 5px;
outline: none;
margin: 6px;
cursor: pointer;
}
.modal {
position: absolute;
width: 100%;
height: 100vh;
margin-top: 50px;
left: -100%;
z-index: -1;
background-color: aqua;
border-radius: 5px;
transition: all 0.5s ease;
}
.modal.hidden {
left: 0%;
}
#first {
position: absolute;
width: 200px;
height: 200px;
background-color: blue;
}
#last {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<button id="button-1">Кнопка 1</button>
<button id="button-2">Кнопка 2</button>
</header>
<div class="modal">
<div id="first"></div>
</div>
<div class="modal">
<div id="last"></div>
</div>