CSS

.slide {
  position: relative;
  overflow: hidden;
  height: 120px;
  width: 350px;
  margin: 1em 0;
  background-color: #ffc;
  border: 1px solid #999;
}
.slide .inner {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 338px;
  height: 36px;
  padding: 6px;
  background-color: #4c5;
  color: #333;
}

.slide button {
  margin: .7em 0 0 .7em;
}
.js #slidebottom .inner { 
  display: none;
}

jQuery (after including the core jquery.js file)

$(document).ready(function() {
  $('#slidebottom button').click(function() {
    $(this).next().slideToggle();
  });

  $('#slidewidth button').click(function() {
    $(this).next().animate({width: 'toggle'});
  });


  $('#slideleft button').click(function() {
    var $lefty = $(this).next();
    $lefty.animate({
      left: parseInt($lefty.css('left'),10) == 0 ?
      -$lefty.outerWidth() :
      0
    });
  });

  $('#slidemarginleft button').click(function() {
    var $marginLefty = $(this).next();
    $marginLefty.animate({
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
      $marginLefty.outerWidth() :
      0
    });
  });  

  $('#slidewidthsome button').click(function() {
    var $some = $(this).next(),
    someWidth = $some.outerWidth(),
    parentWidth = $some.parent().width();
    $some.animate({
      width: someWidth === parentWidth ? 
      someWidth/2 : 
      parentWidth - (parseInt($some.css('paddingLeft'),10) + parseInt($some.css('paddingRight'),10))});
  });

});