JSFiddle - React, Tailwind, and code Playground

HTML

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

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





<!-- -->
<div class="comment">It's running in jQuery <strong>1.8.3</strong>, I want to run in 1.9.1.</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

jQuery(document).ready(function() {

    
$(".trigger").toggle(function(){ 
		$("#map").animate({height: '400px'}, 550, function() { $(".trigger").text("see small"); });
}, function(){
   		$("#map").animate({height: '205px'}, 250, function() { $(".trigger").text("see big"); });
});
    
    
});