jQuery Toggle not working in Drupal

Question

Problem

I'm using jQuery toggle to make one block appear when another is clicked. The code works in jsfiddle but doesn't in Drupal.

Set-Up

I have a node with two blocks on it, applytoggle and tellafriend. Apply toggle:

<div class="applytoggle">
    //*Other stuff*
</div>

Tellafriend:

<div id="block-tellafriend-tellafriend-form" class="block block-tellafriend"></div>

In my template file I add the following script :

function mytheme_preprocess_page (&$vars) {
  drupal_add_js('sites/all/themes/tefltheme/toggle.js', 'file');

Which looks like this:

(function ($) {
    $('div.applytoggle').click(function() {
        $('.applytoggle_title, .block-tellafriend').toggle();
    });
})(jQuery);

This works great in jsfiddle - http://jsfiddle.net/dr9vG/, but doesn't in my actual page. The script is loaded successfully and I've got other jQuery scripts loaded and running the same way which work (not related, different objects). Why doesn't this work?

Answer 1

Most likely because the JS code you write in JSFiddle is automatically run when the document is ready; the same isn't true in a normal environment, you need to be explicit:

(function ($) {
  $(function() {
    $('div.applytoggle').click(function() {
      $('.applytoggle_title, .block-tellafriend').toggle();
    });
  });
})(jQuery);

But to be properly Drupal you should use behaviors:

(function ($) {
  Drupal.behaviors.myToggle = {
    attach: function(context, settings) {
      $('div.applytoggle', context).click(function() {
        $('.applytoggle_title, .block-tellafriend').toggle();
      });
    }
  };
})(jQuery);