JSFiddle - React, Tailwind, and code Playground

HTML

<span class="trigger">see big</span>

<div id="map"></div>

CSS

#map {
  width: 450px;
  height: 205px;
  background: #CCC;
  margin: 20px 0 0;
}

.trigger {
  font-size: 20px;
  border: 1px solid #000;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
}

.trigger:hover {
  background: #EEE
}

.comment { font-size: 20px; padding-top: 100px; color: #666 }

JavaScript

$(".trigger").click(function(){
     if($("#map").css('height') == '400px'){
       $("#map").stop().animate({height:'205px'},550);
       $(this).text("see big");
     };
     if($("#map").css('height') == '205px'){
        $("#map").stop().animate({height:'400px'},250);
         $(this).text("see small");
     };
 });