A CodePen by Abhishek Hingnikar.

index.html

<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400' rel='stylesheet' type='text/css'>

<nav id="main-nav">
  
</nav>
<div id="main-map" class="map-container"></div>
<div id="campaign" class="widget accordion">
  <div class="page">
    <header>Project X</header>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam voluptatem distinctio adipisci suscipit recusandae ullam odio ab eum beatae ut deserunt hic fuga neque accusamus fugit voluptates culpa! Aperiam.</p>
    </div>
  </div>
  <div class="page">
    <header>Join the fight</header>
    <div class="content">
      <form>
        <textarea placeholder="I believe a free projectX can change lifes because ..."></textarea>
        <div id="pos-options">
          <input placeholder="I am from" class="search" type="text" />
        </div>
        <button type="submit">Share voice!</button>
      </form>
    </div>
  </div>
  <div class="page">
    <header>Share</header>
    <div class="content">
      <p> Share the word, every voice counts!</p>
      <input type="text" readonly="readonly"  value="http://bit.ly/wiki234"/>
      <div id="social-links">
        <a href="#">
          <span class="icon-facebook"></span>
        </a>
        <a href="#">
        <span class="icon-twitter"></span>
        </a>
        <a href="#">
        <span class="icon-google-plus"></span>
        </a>
        <a href="#">
        <span class="icon-adn"></span>
        </a>      
      </div>
    </div>
  </div>
</div>

script.js

// A lot of CSS sugar is inloved in this
// Perhaps a gracefull degrading version is what we need
function GMapsInit(){

  var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 3,
          disableDefaultUI:true,
          mapTypeId: google.maps.MapTypeId.TERRAIN
        };
  var map = new google.maps.Map(document.getElementById("main-map"),
            mapOptions);
  
  
  
}



function Accordion(index,root){
  if( !(this instanceof Accordion)){
    return new Accordion(index,root);
  }
  var accordion = this;
  function handleClick(){
    accordion.active && accordion.active.removeClass("active");
    accordion.active = $(this).parent(".page");
    accordion.active.addClass("active");
  }
  this.active = null;
  this.$root = $(root);
  this.pages = this.$root.children(".page");
  this.pages.each(function(index,element){
    $(element).on("click","header",handleClick);
  });
}

$(".accordion").each(Accordion);
GMapsInit();

style.css

/* Custom rule remove if u want */
.widget{ 
  width:320px;
  margin:0px auto;
}

/* End of custom rule */
body,html{
  background:#ddd;
}

body{
  font-family:'Ubuntu',sans-serif;
  color:#343434;
  font-weight:300;
  line-height:150%;
  font-size:1.1em;
  margin:0px auto;
}
.widget .gutter{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
}
.widget{
  box-sizing:border-box;
  display:inline-block;
  margin:2em 1em;
  position:absolute;
  right:0px;
  background:#fff;
  box-shadow:0px 0px 0px 4px #ccc;
}
.widget.accordion{
  overflow:hidden;
}
.widget header{
  cursor:pointer;
  padding:0.5em;
  background:#3498DB;
  line-height:150%;
  font-size:150%;
  color:#eee;
  transition:background 400ms;
  font-weight:400;
}
.widget header.active,.widget .active header{
  background:#2980b9;
}

.widget header:hover{
  background:#44A5EC;
}

.widget header:active{
  background:#2F88C8;
}

.widget .content{
  padding:0.6em;
}

.widget .page{
  position:relative;
}
.page header span{
  float:right;
  line-height:1.4em;
}
.page .content{
  max-height:0px;
  box-sizing:border-box;
  height:auto;
  padding:0.0em 0.6em;
  overflow:hidden;
  transition:all 400ms;
}

.page.active .content{
  padding:0.6em;
  height:auto;
}

.content > p{
  text-align:justify;
}

.content input,.content button,.content textarea{
  font-family:'Ubuntu',sans-serif;
  box-sizing:border-box;
  font-size:1.2em;
  display:block;
  width:100%;
  padding:0.4em;
  color:#333;
  margin:0.4em 0px;
  border:1px solid #888;
}

.content input:hover,.content button:hover,.content textarea:hover{
  border-color:#000;
  outline:0;
}

.content input:focus,.content button:active,.content textarea:focus{
  border-color:#2F88C8;
  outline:0;
}

.content textarea{
  resize:vertical;
}
#campaign{
  bottom:0px;
  height:auto;
}

#campaign .page.active .content{
  max-height:14em;
}
#social-links{
  font-size:150%;
}
#social-links a{
  color:#545454;
  font-size:1.4em;
  line-height:2.4em;
  text-decoration:none;
  float:left;
  width:25%;
  text-align:center;
}

#social-links a:hover{
  color:#000;
}

#main-map{
  position:absolute;
  height:100%;
  width:100%;
}