(function($){
    $.fn.fold = function(options) {
      var ie55 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1);
      var ie6 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1);
        
      // We just won't show it for IE5.5 and IE6. Go away. I'm really tempted to write "document.location= 'http://www.getfirefox.com';" here.
      if (ie55 || ie6) {this.remove(); return true;}
      
      // New - you don't have to specify options!
      options = options || {};
        
      // Default awesomeness
      var defaults = {
        directory: '.',         // The directory we're in
        side: 'right',           // change me to "right" if you want rightness
        turnImage: 'fold-sw.png',  // The triangle-shaped fold image
        maxHeight: 400,         // The maximum height. Duh.
        startingWidth: 80,     // The height and width   
        startingHeight: 80,    // with which to start (these should probably be camelCase, d'oh.)
        autoCurl: true         // If this is set to true, the fold will curl/uncurl on mouseover/mouseout.
      };

      // Change turnImage if we're running the default image, and they've specified 'right'
      if (options.side == 'right' && !options.turnImage) defaults.turnImage = 'fold-sw.png';
      
      // Merge options with the defaults
      var options = $.extend(defaults, options);
        
      // Set up the wrapper objects
      var turn_hideme = $('<div id="turn_hideme">');
      var turn_wrapper = $('<div id="turn_wrapper">');
      var turn_object = $('<div id="turn_object">');
      var img = $('<img id="turn_fold" src="'+ (options.directory+'/'+options.turnImage) +'">');

      // Set starting width and height of our turn-o-ma-bob
      turn_object.css({
        width: options.startingWidth,   
        height: options.startingHeight
      });
      
      // There are different CSS considerations for a top-right fold.
      if (options.side == 'right') turn_wrapper.addClass('right');
      
      // Rappin', I'm rappin' - I'm rap-rap-rappin'.
      this.wrap(turn_wrapper).wrap(turn_object).after(img).wrap(turn_hideme);
        
      // If you want autoCurl, you don't get scrolling. Why? Because it looks silly.
        
      turn_wrapper = $('#turn_wrapper');
      turn_object = $('#turn_object');

      if (!options.autoCurl) {
        // Hit 'em with the drag-stick because it ain't gonna curl itself!
        turn_object.resizable({   
          maxHeight: options.maxHeight,   
          aspectRatio: true,
          handles: options.side == 'left' ? 'se' : 'sw'
        });
      } else {
        // Thanks to @zzzrByte for this bit!
        turn_wrapper.hover(
          function(){
            turn_object.stop().animate({
              width: options.maxHeight,
              height: options.maxHeight
            });
          },
          function(){
            turn_object.stop().animate({
              width: options.startingHeight,
              height: options.startingHeight
            });
          }
        );
      }
    };
})(jQuery);

#noborder { border:none};

#turn_wrapper {
     width: 80px;
     height: 80px;
     display: block;
     position: absolute;
     top: 0;
     left: 0;
}

#turn_hideme {
     width: 85%;
     height: 85%;
     overflow: hidden;
     display: block;
     position: absolute;
     float: left;
     top: 0;
     left: 0;
     z-index: 1;
}

#turn_object{
     position: relative;
}

#turn_wrapper.right #turn_hideme *,
#turn_wrapper.right #turn_object {
     float: right !important;
}

#turn_wrapper.right #turn_hideme {
     float: right !important;
     right: 0 !important;
     left: auto;
}
#turn_wrapper.right #turn_object {
     right: 0 !important;
     left: auto !important;
}

#turn_wrapper.right {
     position: absolute;
     top: 0;
     width: 100%;
     height: 0;
     right: 0 !important;
}

#turn_wrapper.right #turn_object * {
     position: absolute;
     right: 0 !important;
}

#turn_wrapper #turn_object img#turn_fold {
     display: block;
     width: 100%;
     height: 100%;
     z-index: 1000;
     right: 0;
     position: absolute;
}

/* the jQuery CSS Framework */
#turn_wrapper .ui-resizable { position: relative;}
#turn_wrapper .ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; background-image: url(#none)}
#turn_wrapper .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 0; bottom: 0; }
#turn_wrapper .ui-resizable-sw { cursor: sw-resize; width: 12px; height: 12px; left: 0; bottom: 0; }

<head>
<script src="turn.js"></script>
<link rel="stylesheet" href="turn.css">
<script type="text/javascript">
$(document).ready(function(){
$('#target').fold();
});
</script>
</head>
<body>
<img src="code.png" id="target">
</body>