Toggle div size on click

Question

I'm trying to make div bigger on click. After clickig again, I'd like to make the div small. Is there a way to do this? And could I add animation to it?

document.addEventListener('click', function(event) {
  if (!event.target.matches('.hud-map')) return;
  event.preventDefault();
  var map = document.getElementById("hud-map");
  map.style.height = "200px";
  map.style.width = "200px";
}, false);

<div id="hud-map" class="hud-map" style="width: 100px; height: 100px;
 border-radius: 1em; color: rgb(211, 84, 0); border: 2px solid rgb(0, 0, 0);">

</div>

Answer 1

You can use CSS to handle the animation with something like transition: all .5s;, and to handle the toggling of the size, a ternary condition like (map.style.height == '200px') ? "100px" : "200px";

document.addEventListener('click', function(event) {
  if (!event.target.matches('.hud-map')) return;
  event.preventDefault();
  var map = document.getElementById("hud-map");
  map.style.height = (map.style.height == '200px') ? "100px" : "200px";
  map.style.width = (map.style.width == '200px') ? "100px" : "200px";
}, false);

#hud-map {
  width: 100px;
  height: 100px;
  border-radius: 1em;
  color: rgb(211, 84, 0);
  border: 2px solid rgb(0, 0, 0);
  transition: all .5s;
}

<div id="hud-map" class="hud-map">
</div>