Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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-control').css({
  width: $('.footer').width(),
  height: $('.panel-control').height() + 25
});
​
$('.panel-toggle').css({
  width: $('.footer').width(),
  height:$('.footer').height()
});
​
$('.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'});
  }
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers