$(document).ready(function(){
   //
   // Set an attribute of orig_height inside each element in the "more_content" class with height > display_height
   // set its height to 48, and place a "more" after it.
   //
   $(".more_content").each(function() {
      var orig_height = $(this).height(); 
      var display_height = $(this).attr('display_height'); 
      if (orig_height > display_height) {
         $(this).height(display_height + "px").data('orig_height', orig_height)
            .after('<a class="more_button" id="' + $(this).attr('id').replace('_content','') + '" href="">more »</a>');
      }
   });

   //
   // When "more" button is hit, increase the "more_content" to full size, and change "more" to "less"
   // When it is clicked again, reduce its size, and change "less" back to "more"
   //
   $(".more_button").toggle(function() {
      var content_id = "#" + $(this).attr('id') + "_content";
      $(this).fadeTo('slow', 0, function() { $(this).html("« less"); }).fadeTo('slow', 1.0);
      $(content_id).animate({height: $(content_id).data('orig_height')}, 'slow');
   }, function() {
      var content_id = "#" + $(this).attr('id') + "_content";
      var display_height = $(content_id).attr('display_height');
      $(this).fadeTo('slow', 0, function() { $(this).html("more »"); }).fadeTo('slow', 1.0);
      $(content_id).animate({height: display_height}, 'slow');
   });
});