(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);

<script src="turn.js"></script>   
<script type="text/javascript">   
$(document).ready(function(){   
$('#target').fold();   
});   
</script>

<img src="code.png" id="target">

#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; }