JSFiddle - React, Tailwind, and code Playground

by jrubisch

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="container">
	
	<!-- top navbar -->
	<nav class="navbar navbar-default navbar-fixed-top">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" data-toggle="collapse" data-target="#top-navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed">
					<span class="sr-only">Toggle navigation</span>
				    <span class="icon-bar"></span>
				    <span class="icon-bar"></span>
				    <span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">Title</a>
			</div>

			<div id="top-navbar-collapse" class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Link 1</a></li>
					<li><a href="">Link 2</a></li>
					<li><a href="">Link 3</a></li>
					<li><a href="">Link 4</a></li>
				</ul>
			</div>
			

		</div><!-- container-fluid -->
	</nav>
	


	<div class="tab-content">

		<div role="tabpanel" class="tab-pane active fade in" id="map-panel">
            <div id="map"></div>
            <div class="container-fluid" id="teaser-container">
				<div class="row" id="teaser-slideup-button">
					<div class="col-xs-12">
						<a role="button" href="#teaser-content">
							<i class="fa fa-chevron-up"></i>
						</a>
					</div>
				</div>
				<div class="row" id="teaser-header">
					<div class="col-xs-12">Teaser header</div>
				</div>

				<div id="teaser-content">
					<div class="row">
						<div class="col-xs-12">
                            <div style="height: 160px" />
						</div>
					</div>
				</div>
			</div>            
        </div>
   ...

CSS

body { 
	padding-bottom: 40px;
    padding-top: 50px;
}


body, html {
    overflow-x: hidden;
}

body, html, .container {
    height: 100%;
}

#map {
    height:83%;    
    width: 100%;
    position: absolute;
    display: inline-block;
    background: linear-gradient(red, blue); 
}

#map-panel {
    position: absolute;
    top: 0px;
    overflow-y: hidden;
    height: 100%;
    width: 100%;
}

.container {
    padding: 0px;
    margin: 0px;
}

#teaser-container {
    z-index:1000; 
    position: absolute;
    bottom: -100px;
    background: #fff;
    width: 100%;
    display: inline-block;
    overflow-y: hidden;
}

#teaser-slideup-button .col-xs-12 {
    text-align: center;
}

#teaser-content {
    background: #fcc;   
}

JavaScript

$(document).ready(function() {
    
    $('#teaser-slideup-button').on('click', function (e) {
  			
	  			$('#teaser-container').animate({
	  				'bottom': '0px'
	  			});
	  			$('#teaser-content').css('display', 'block');
	  			$('#teaser-slideup-button i').removeClass('fa-chevron-up');
	  			$('#teaser-slideup-button i').addClass('fa-chevron-down');
	  		
  		});
    
});