Theming

Adding jQuery Scripts

Last updated
Theming

This page is archived

We're keeping this page up as a courtesy to folks who may need to refer to old instructions. We don't plan to update this page.

Alternate resources

JavaScript in Drupal

Add a jQuery Javascript file to Drupal following best practice methods for including javascript files on the page. Learn about how your custom jQuery scripts are loaded on to the page, and when they get executed. Introduces jQuery's no-conflict mode and provides some best practice examples for writing your own jQuery files within the context of Drupal as a whole.

Note: To avoid hiding all blocks on your page, target your blocks more specifically. For example, #sidebar .block .content Also, inspect your markup for the existence of a class of title on the h3, which may or may not be applied in your theme. The new example below does not include the title class.

(function($){
  $(document).ready(function(){
    
    $('#sidebar .block .content').hide();
    $('#sidebar .block h3').css('cursor', 'pointer').click(function(){
      $(this).parent().children('.content').slideToggle();
    });

  });
})(jQuery);