Load newer versions of jQuery on Drupal 6

Drupal and jQuery are two of my favorite things. They play nicely with each other and make development a cinch. Unfortunately the version Drupal ships with can be limiting. This is because Drupal 6 was released in February of 2008 and ships with jQuery 1.2.6. As of July 2011, jQuery is at version 1.6.2.

There is a popular module for Drupal called jquery_update which brings the version up to 1.3.2. The module won't update to a newer version because any newer version of jQuery breaks some core Drupal functionality. Until recently, this wasn't a problem for me as jQuery 1.3.2 has worked fine.

For a new client, I needed to be able to use the jQuery Nested Accordion plugin which requires at least jQuery 1.4.2. I did some searching and found a way to do this but it requires editing jQuery libraries to pick up the new version.

Here's how I found you can add a new version of jQuery without interfering with Drupal or any jQuery libraries. This would go in your page.tpl.php:

<script type="text/javascript">
  // Save a reference to Drupal default jQuery (1.2.6 or 1.3.2 with jquery_update)
  var jqOrig = jQuery;
</script>
<!-- Load newer version of jQuery from Google CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- Load the library that needs the new jQuery -->
<script type="text/javascript" src="<?php print base_path(); ?>/sites/all/themes/YOUR_THEME/js/jquery.nestedAccordion.js"></script>
<script type="text/javascript"> 
  // Don't let new jQuery take over $ variable
  jQuery.noConflict();
  
  (function($) {
    $(function() {
      // Do the thing you need with the library
      $('#block-menu').accordion({container:false, event:'hover', activeLink: false})
    });
  })(jQuery);
  
  // Reset jQuery to original (old) object
  var jQuery = jqOrig;
</script>