JSFiddle - React, Tailwind, and code Playground

by ppgab

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://js.arcgis.com/3.17"></script>
<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<div>
  <h1 class="big-text"> 
  Test Application
  </h1>
</div>

<div id="map" class="down">
  <div id ="sliderRow" ><img id="up_button" src="https://upload.wikimedia.org/wikipedia/commons/0/01/Arrow-up-navmenu.png"></div>
</div>

CSS

body {
  margin: 0;
  background: url(https://pcbx.us/beoh.jpg);
  background-attachment: fixed;
  background-size: cover;
}

.big-text {
  text-align: center;
  color: #2C2C2C;
  font-family: pt sans narrow;
  font-weight: 100;
  font-size: 4em;
}

h2 {
  font-family: pt sans narrow;
  text-transform: uppercase;
  text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.85);
}

#container {
  background: #303030;
  text-align: center;
  color: #FFF;
  font-size: 2em;
  height: 50%;
  width: 100%;
  bottom: 0;
}

.hidden {
  display: none;
}

#map {
  background: #303030;
  width: 100%;
  text-align: center;
  height: 28px;
  bottom: 0;
  position: fixed;
  overflow: auto;
}

#sliderRow{
  top: 0;
}

JavaScript

var map;

require(["esri/map", "dojo/domReady!"], function(Map) {
  map = new Map("map", {
    basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
    center: [-122.45, 37.75], // longitude, latitude
    zoom: 13
  });
});



$('#sliderRow').click(function() {

  if ($("#map").hasClass("down")) {
    $("#map").removeClass("down");
    $("#map").animate({
      height: "50%"
    }, 600);

  } else {

    $("#map").animate({
      height: "28px"
    }, 350);
    $("#map").addClass("down");
  }

});