JSFiddle - React, Tailwind, and code Playground

by Lindsay Mantzel

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id = "test">collapse</button>
<div class = "map-section"> 
<div class = "map-holder"> 
<div class = "map-floater">See Map</div>
<iframe src="http://www.northerntechnomics.com/lmantzel/googlemap/maptest12.html#" width= "100%" height = "100%" frameborder="0"/>
        </div> 
</div>

CSS

body {
    height: 100%;
}
.map-section {
    height: 280px;
    position: relative;
}
.map-holder {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 0;
    overflow: hidden;
}
.map-floater {
    position: absolute;
    z-index: 3;
    height: 280px;
    width: 100%;
    background: #fff;
    opacity:.5;
    line-height: 380px;
    font-size: 35px;
    font-family: Arial;
    text-align: center;
    cursor: pointer;
}

JavaScript

$(".map-floater").click(function(){
  $(".map-floater").hide();
  $(".map-section").animate({height:"500px"});     
});

$("#test").click(function(){
  $(".map-section").animate({height:"280px"});     
  $(".map-floater").show();
});