$.fn.nextUntil = function(expr) {
   var match = [];

   // Figure out which elements to push onto the array
   this.each(function(){
       // Traverse through the sibling nodes
       for( var i = this.nextSibling; i; i = i.nextSibling ) {
           // Make sure that we're only dealing with elements
           if ( i.nodeType != 1 ) continue;

           // If we find a match then we need to stop
           if ( $.filter( expr, [i] ).r.length ) break;

           // Otherwise, add it on to the stack
           match.push( i );
       }
   });
   return this.pushStack( match, arguments );
};

// Add the "js" class to the HTML element so we can hide non-h3 elements *immediately* with css only if js is enabled.
$('html').addClass('js');


$(document).ready(function() {
  // Cache the '#content-tabbed h3' selector for performance because we'll be using it more than once
  var $h3 = $('#content-tabbed h3');

  $h3.each(function(i){}).append("<span>(Click to show)</span>"); // (15/10/2008 8:13 p.m)
  
  $h3
    // For accessibility and to allow navigation by kbd, wrap the contents of each h3 in a link.
    .wrapInner('<a href="#"></a>')
    
    // Wrap all next siblings of each h3 in their own parent div. 
    //    This improves performance, especially if hiding and showing include fx
    .each
    (function(index)
      {
         $(this).nextUntil('h3').wrapAll('<div class="details"></div>');
      }
    );
  
  // remove display:none set by css from all children of <div class="details">
  $('#content-tabbed div.details').children().show();
  
  // Attach click handler to the h3 links. This controls hiding and showing of the details.
  $h3.find('a').click(function(event) {
    event.preventDefault();
    var $thisDetail = $(this).parent().next();
    if ($thisDetail.is(':visible')) {
      $thisDetail.slideUp();      
    } else {
      $thisDetail
        .slideDown()
        .siblings('div.details:visible').slideUp();
    }

  });
});