title: slideToggle doesn't work
body: <p>I have the following script inside other elements. However, the sub countries only <code>expands</code> and don't <code>collapse</code> if clicked again. Instead, they expand again no matter how many time you clicks.</p>
  
  <p>Can anyone help please?</p>
  
  <pre><code>&lt;div id="loginContainer"&gt;
  &lt;a href="#" id="loginButton"&gt;&lt;span style="background: #EBEBEB url('/Images/Flags/united_kingdom.jpg') right no-repeat;"&gt;United Kingdom&lt;/span&gt;&lt;em&gt;&lt;/em&gt;&lt;/a&gt;
  &lt;div style="clear:both"&gt;&lt;/div&gt;
   &lt;div id="loginBox"&gt;
    &lt;!-- Countries Accordion starts here --&gt;
    &lt;ul class="the_menu"&gt;
        &lt;li&gt;&lt;a href="#" style="background: url('/Images/Flags/USA.gif') left no-repeat;" &gt;United States&lt;/a&gt;&lt;/li&gt;      
        &lt;li&gt;
        &lt;a href="#" class="expand" title="Switzerland" style="background: url('/Images/Flags/USA.gif') left no-repeat;" &gt;Switzerland ..&lt;/a&gt;
            &lt;ul class="submenu"&gt;
                &lt;li&gt;&lt;a href="#" title="Switzerland (German)" style="background: url('/Images/Flags/USA.gif') left no-repeat;;"&gt;Switzerland (German)&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#" title="Switzerland (French)" style="background: url('/Images/Flags/USA.gif') left no-repeat;;"&gt;Switzerland (French)&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#" title="Switzerland (Italian)" style="background: url('/Images/Flags/USA.gif') left no-repeat;;"&gt;Switzerland (Italian)&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#" title="Germany" style="background: url('/Images/Flags/Germany.gif') left no-repeat;;"&gt;Germany&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" class="expand" title="Canada" style="background: url('/Images/Flags/Germany.gif') left no-repeat;;"&gt;Canada ..&lt;/a&gt;
            &lt;ul class="submenu"&gt;
                &lt;li&gt;&lt;a href="#" title="Canada (English)" style="background: url('/Images/Flags/Germany.gif') left no-repeat;;"&gt;Canada (English)&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#" title="Canada (French)" style="background: url('/Images/Flags/Germany.gif') left no-repeat;;"&gt;Canada (French)&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#" title="Turkey" style="background: url('/Images/Flags/Germany.gif') left no-repeat;"&gt;Turkey&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" title="Sweden" style="background: url('/Images/Flags/Germany.gif') left no-repeat;"&gt; Sweden&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>And the JQuery script is (please note below the new script):</p>
  
  <pre><code>$(document).ready(function () {
  
  
   var countriesContainer = $('#loginContainer');
  var button = $('#loginButton');
  var box = $('#loginBox');
  //var form = $('#loginForm');
  //button.removeAttr('href');
  
  countriesContainer.hover(function() {
      box.toggle();
      button.toggleClass('active');
  });
  box.mouseup(function() { 
      return false;
  });
  
  $(this).mouseup(function(login) {
      if(!($(login.target).parent('#loginButton').length &gt; 0)) {
          button.removeClass('active');
          box.hide();
          $('ul.submenu').hide();
      }
  });
  
   $('ul.submenu').hide();
      $('.expand').click( function(){
          $(this).siblings('.submenu').slideToggle('normal');
          return false;
      });
  });
  </code></pre>