How to add jQuery to the user profile page only? Me and Javascript/jQuery don't get along well ...

What I want to do is show the first 200 or so characters of a user's "about me" text and then expand it when you click the "more" link.

I added to my template.php

function bartik_preprocess_user_profile(&amp;$variables){
  drupal_add_js('themes/bartik/js/moreless.js');

}


The moreless.js code is:

jQuery(document).ready( function ($) {    
    $(".moreLess").hide();

    $(".moreLessSwitch").toggle(function() {             
        $(this).html("&lt;a href=#&gt;Less&lt;/a&gt;");            
        $(this).prevAll(".moreLess").slideDown();         
    }, function() {            
        $(this).html("&lt;a href=#&gt;More...&lt;/a&gt;");            
        $(this).prevAll(".moreLess").slideUp();        
    }); 
}(jQuery));


in user-profile.tpl.php I have:

stuff to always show
&lt;div class="moreLess"&gt;stuff to hide...&lt;/div&gt;&lt;br&gt;
&lt;div class="moreLessSwitch"&gt;[+] more&lt;/div&gt;​


This is the working jfiddle sample.

When I load a user profile nothing happens, I had all caches flushed. No js errors. When i copy the jquery code into the console it works. 
This has to be something dumb simple ;-)

Also, is this really the correct way to add conditional js to some pages?
The code you should use is the following one:

(function ($) {
  $(function ($) {    
    $(".moreLess").hide();

    $(".moreLessSwitch").toggle(function() {             
        $(this).html("&lt;a href=#&gt;Less&lt;/a&gt;");            
        $(this).prevAll(".moreLess").slideDown();         
    }, function() {            
        $(this).html("&lt;a href=#&gt;More...&lt;/a&gt;");            
        $(this).prevAll(".moreLess").slideUp();        
    }
  ); 
})(jQuery);


In Drupal 7, JavaScript using jQuery should be wrapped between (function ($) { and })(jQuery);. You should also use Drupal behaviors, similarly to what done in the batch.js file used from Drupal.

(function ($) {

/**
 * Attaches the batch behavior to progress bars.
 */
Drupal.behaviors.batch = {
  attach: function (context, settings) {
    $('#progress', context).once('batch', function () {
      var holder = $(this);

      // Success: redirect to the summary.
      var updateCallback = function (progress, status, pb) {
        if (progress == 100) {
          pb.stopMonitoring();
          window.location = settings.batch.uri + '&amp;op=finished';
        }
      };

      var errorCallback = function (pb) {
        holder.prepend($('&lt;p class="error"&gt;&lt;/p&gt;').html(settings.batch.errorMessage));
        $('#wait').hide();
      };

      var progress = new Drupal.progressBar('updateprogress', updateCallback, 'POST', errorCallback);
      progress.setProgress(-1, settings.batch.initMessage);
      holder.append(progress.element);
      progress.startMonitoring(settings.batch.uri + '&amp;op=do', 10);
    });
  }
};

})(jQuery);


The code in the JSFiddle works fine for me. It just be only a problem of wrapping the code correctly.