Amigos, esta es mi primera pregunta. Estoy haciendo un ejercicio en el cual necesito agrandar y achicar un elemento usando Jquery. Mi profesor sugirió usar una variable booleana para usar el mismo boton para achicar y agrandar. Traté de desarrollar la animación y en los dos primeros click, lo logro y luego se agranda y se achica sola. Espero puedan ayudarme. Saludos
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Ejercicio 1</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<div>
<div>
<div id="boton" class="btn" style="background-color: red; border: 1px solid gray; margin: 10px; padding: 10px">
<span>haz click!!!</span>
</div>
<div id="cambio" style="background-color: white; border: 1px solid gray; margin: 10px; padding: 10px">
<span>Cambiame</span>
</div>
</div>
</div>
</body>
<script>
// 1. Al hacer click sobre la caja que dice "haz click", aumenta el tamaño y el color de la
// caja que dice "cambiame" (sólo utiliza jQuery). Siente la libertad de agregar las
// clases o ids que sean necesarios (no modificar estructura html entregada).
var primer = true;
$(document).ready(function () {
$("#boton").on("click", function () {
$("#boton > span").css("color", "white");
$("#cambio").css("background", "blue").css("color", "white");
if (primer) {
$("#cambio").animate({
height: "200px",
});
}
primer = false
if (!primer){
$("#boton").on("click", function () {
primer = true
$("#cambio").animate({
height: "10px",
});
});
}
});
});
</script>
</html>