How to add jQuery to the user profile page only?

Question

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(&$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("<a href=#>Less</a>");            
        $(this).prevAll(".moreLess").slideDown();         
    }, function() {            
        $(this).html("<a href=#>More...</a>");            
        $(this).prevAll(".moreLess").slideUp();        
    }); 
}(jQuery));

in user-profile.tpl.php I have:

stuff to always show
<div class="moreLess">stuff to hide...</div><br>
<div class="moreLessSwitch">[+] more</div>​

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?

Answer 1

The code you should use is the following one:

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

    $(".moreLessSwitch").toggle(function() {             
        $(this).html("<a href=#>Less</a>");            
        $(this).prevAll(".moreLess").slideDown();         
    }, function() {            
        $(this).html("<a href=#>More...</a>");            
        $(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 + '&op=finished';
        }
      };

      var errorCallback = function (pb) {
        holder.prepend($('<p class="error"></p>').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 + '&op=do', 10);
    });
  }
};

})(jQuery);

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

Answer 2

I came across an article "Painless collapsible Divs in Drupal". The irony for me is that I went through a lot of pain to get this simple feature working.

Ctools has a built in feature to do it with 1 line of code, ouch!

print theme('ctools_collapsible', array('handle' => 'Click me and you will see collapsed content', 'content' => $collapsed_content, 'collapsed' => TRUE));