Why does jQuery slideToggle revert back to initial hidden state after running?

Question

I have a Superfish menu and a simple jquery slideToggle animation attached to each menu item. I am using Drupal 7 & the Superfish module.

The idea is that on click it will show the body content of the site which is initially being hidden. All seems to work fine the click event fires the toggle but after the animation is done, it quickly reversed the animation back to the initial hidden state.

Doing this is seems pretty trivial with straight HTML / jQuery. But it's not quite working within my Drupal theme.

Here is my jQuery:

(function ($) {    
Drupal.behaviors.my_fusion_menu = {
attach: function(context,settings) {

$('#content').hide();
$('.sf-depth-1 a' || '.sf-depth-2 a' ).bind(
    'click', function() {$('#content').slideToggle('slow');}
     ) // /click
    }   // /attach
}; // /Drupal Behaviors 
})(jQuery);

I am fairly new to working with jQuery. It seems like the answer is pretty simple, but I am not sure how to set this up.

Any suggestions?

Answer 1

Try this code below.

$('#content').hide();
$('.sf-depth-1 a' || '.sf-depth-2 a' ).click(function() {
  $('#content').toggle('slow', function() {
    // Animation complete.
  });
});