/jsbin.dutukoho.css

## jsbin.dutukoho.css
body{
  height: 470px;
  width: 320px;
}

.content, .footer{
  border: 1px solid #ccc;
}

.content{
  height: 400px;
  overflow-y: scroll;
  background-color: SEAGREEN;
  color: #fff;
  padding: 10px;
}

.footer{
  height: 50px;
  width: 100%;
  /* overflow: hidden; */
  /* position: relative; */
}

.panel-control{
  width: 100%;
  background-color: thistle;
  position: fixed;

  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;

  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slide-up {
  -webkit-transform: translateY(-75%);
  transform: translateY(-75%);
}

.panel-toggle{
  width: 50%;
  height: 50px;
  display: block;
}

.panel-toggle.hide:before{
  content: 'show';
}

.panel-toggle.show:before{
  content: 'hide';
}


## jsbin.dutukoho.html
<!DOCTYPE html>
<html>
<head>
<script src="http://zeptojs.com/zepto.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="content">
  <h1>I gotta piss</h1>
<p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p>

<h1>Hold on to your butts</h1>
<p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p>

<h1>Is she dead, yes or no?</h1>
<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. </p>
</div>
<div class="footer">
  <div class="panel-control">
    <button class="panel-toggle hide"></button>
    <div class="panel-subviews">
      <p>Choice 1</p>
      <p>Choice 1</p>
      <p>Choice 1</p>
      <p>Choice 1</p>
      <p>Choice 1</p>
      <p>Choice 1</p>
      <p>Choice 1</p>
      <p>Choice 1</p>
    </div>
  </div>
</div>
</body>
</html>

## jsbin.dutukoho.js
$('.panel-toggle').on('click', function(){
  var hidden = $(this).hasClass('hide');
  if(hidden){
    $(this).removeClass('hide').addClass('show');
    $('.panel-control').addClass('slide-up');
    $('.content').css({'overflow-y': 'hidden'});
  }else{
    $(this).removeClass('show').addClass('hide');
    $('.panel-control').removeClass('slide-up');
    $('.content').css({'overflow-y': 'scroll'});
  }
});
	body{
	height: 470px;
	width: 320px;
	}

	.content, .footer{
	border: 1px solid #ccc;
	}

	.content{
	height: 400px;
	overflow-y: scroll;
	background-color: SEAGREEN;
	color: #fff;
	padding: 10px;
	}

	.footer{
	height: 50px;
	width: 100%;
	/* overflow: hidden; */
	/* position: relative; */
	}

	.panel-control{
	width: 100%;
	background-color: thistle;
	position: fixed;

	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;

	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	}

	.slide-up {
	-webkit-transform: translateY(-75%);
	transform: translateY(-75%);
	}

	.panel-toggle{
	width: 50%;
	height: 50px;
	display: block;
	}

	.panel-toggle.hide:before{
	content: 'show';
	}

	.panel-toggle.show:before{
	content: 'hide';
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://zeptojs.com/zepto.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div class="content">
	<h1>I gotta piss</h1>
	<p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p>

	<h1>Hold on to your butts</h1>
	<p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p>

	<h1>Is she dead, yes or no?</h1>
	<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. </p>
	</div>
	<div class="footer">
	<div class="panel-control">
	<button class="panel-toggle hide"></button>
	<div class="panel-subviews">
	<p>Choice 1</p>
	<p>Choice 1</p>
	<p>Choice 1</p>
	<p>Choice 1</p>
	<p>Choice 1</p>
	<p>Choice 1</p>
	<p>Choice 1</p>
	<p>Choice 1</p>
	</div>
	</div>
	</div>
	</body>
	</html>
	$('.panel-toggle').on('click', function(){
	var hidden = $(this).hasClass('hide');
	if(hidden){
	$(this).removeClass('hide').addClass('show');
	$('.panel-control').addClass('slide-up');
	$('.content').css({'overflow-y': 'hidden'});
	}else{
	$(this).removeClass('show').addClass('hide');
	$('.panel-control').removeClass('slide-up');
	$('.content').css({'overflow-y': 'scroll'});
	}
	});