Untitled

Horizontal Div Slider
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="TestSite/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#slideleft button').click(function() {
var $lefty = $(this).next();
$lefty.animate({
  left: parseInt($lefty.css('left'),10) == 0 ?
  -$lefty.outerWidth() :
  0
});
});
});
</script>

<style>

.slide {
position: relative;
overflow: hidden;
height: 120px;
width: 350px;
margin: 1em 0;
background-color: #FFF;
border: 1px solid #999;
}
.slide .inner {
position: absolute;
left: 0;
bottom: 0;
width: 338px;
height: 36px;
padding: 6px;
background-color: #F00;
color: #333;
}
.slide button {
  margin: .7em 0 0 .7em;
 }
.js #slidebottom .inner {
 display: none;
 }
 </style>

 </head>

<div id="slideleft" class="slide">
  <button><img src="TestSite/js/fancy_nav_right.png" /></button>
  <div class="inner">Slide from bottom</div>
</div>


<body>
</body>
</html>