Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  .content_toggle {
    background: url(toggle-btn.png);
    background-color: rgba(0, 0, 0, 0.9);
    position: absolute;
    cursor: pointer;
    bottom: 62px;
    left: 850px;
    height: 30px;
    width: 30px;
  }
  .content { background-image:url(arrow.png); }
  .closed { background-position:0 -30px; } 
  .open { background-position:0 0; }
</style>
</head>
  
<body>
<div class="content_toggle" style="display: block;"></div>
<div class="content">content, content, content</div>
  
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
<script>
  $("div.content_toggle").toggle(
      function() { $('.content').slideDown('slow',
                                  function(){$(this).removeClass('open')});}, 
      function() { $('.content').slideUp('slow',
                                  function(){$(this).addClass('closed')});
  });
</script>
  </body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers