coupon-drawer.html

<style>
.popup {
width:100%;
position:fixed;
z-index:99999999;
bottom:0px;
left: 50%;
transform: translateX(-50%);
text-align:center;
font-family: Open Sans;
font-size:1.1em;
}

.pull-tab {
width:300px;
margin-left:auto;
margin-right:auto;
padding:15px 25px;
background-color:#2a2a2a;
color:white;
font-weight:bold;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
cursor:pointer;
}

.pull-tab.closed:after {
content:"\f077";
font-family: FontAwesome;
}
.pull-tab.opened:after{
content:"\f078";
font-family: FontAwesome;
}

.bottom-drawer {
width:100%;
background-color:#efefef;
display:none;
}

.drawer {
float:left;
width:29.3%;
padding: 2%;
height:200px;
}

#drawer1 {
  background-color:#efefef;
  color:#2a2a2a;
}
#drawer2 {
  background-color:#f7f7f7;
  color:#2a2a2a;
 
}
#drawer3 {
  background-color:#efefef;
  color:#2a2a2a;
}

</style>
<div class="popup">
  <div class="pull-tab opened">
    Available Offers
  </div>
  <div id="drawer-content" class="bottom-drawer">
    <div class="drawer" id="drawer1">
      <h2>Drawer 1</h2>
      <p>Metus imperdiet consequatur, eos quidem dignissimos leo consectetuer nisl dictum laborum eligendi!<p>
    </div>
    <div class="drawer" id="drawer2">
      <h2>Drawer 2</h2>
       <p>Metus imperdiet consequatur, eos quidem dignissimos leo consectetuer nisl dictum laborum eligendi!<p>
    </div>
    <div class="drawer" id="drawer3">
      <h2>Drawer 3</h2>
       <p>Metus imperdiet consequatur, eos quidem dignissimos leo consectetuer nisl dictum laborum eligendi!<p>
    </div>
  </div>
</div>
<script>
jQuery(document).ready(function($){
$(".pull-tab").click(function(){
$(".bottom-drawer").slideToggle("fast");
$('.pull-tab').toggleClass('opened closed');
});
});
</script>